css position

引言

position 属性规定元素的定位类型. 这个属性定义建立元素布局所用的定位机制.

任何元素都可以定位, 不过绝对 (absolute) 或固定 (static) 元素会生成一个块级框, 而不论该元素本身是什么类型. 相对定位元素会相对于它在正常流中的默认位置偏移.

absolute: 生成绝对定位的元素, 相对于 static 定位以外的第一个父元素进行定位. 元素的位置通过 left, top,right 以及 bottom 属性进行规定.
fixed: 生成绝对定位的元素, 相对于浏览器窗口进行定位. 元素的位置通过 left, top,right 以及 bottom 属性进行规定.
relative: 生成相对定位的元素, 相对于其正常位置进行定位. 因此,left:20会向元素的 left 位置添加 20 像素.
static: 默认值. 没有定位, 元素出现在正常的文档流中 (忽略 top, bottom,left,right 或者 z-index 声明).
inherit: 规定应该从父元素继承 position 属性的值.

关于 CSS position, 来自 MDN 的描述:

CSS position 属性用于指定一个元素在文档中的定位方式.top, right,bottom,left 属性则决定了该元素的最终位置.

然后来看看什么是文档流 (normal flow), 下面是 www.w3.org 的描述:

Boxes in the normal flow belong to a formatting context, which may be block or inline, but not both simultaneously. Block-level boxes participate in a block formatting context. Inline-level boxes participate in an inline formatting context.

个人补充 (此处参考 FungLeo 的博客文章, 原文点此):

normal flow 直译为常规流, 正常流, 国内不知何原因大多译为文档流;
窗体自上而下分成一行一行, 并在每行中按从左至右的顺序排放元素;
每个非浮动块级元素都独占一行, 浮动元素则按规定浮在行的一端, 若当前行容不下, 则另起新行再浮动;
内联元素也不会独占一行, 几乎所有元素 (包括块级, 内联和列表元素) 均可生成子行, 用于摆放子元素;
有三种情况将使得元素脱离 normal flow 而存在, 分别是 float, absolute 和 fixed, 但是在 IE6 中浮动元素也存在于 normal flow 中.

relative, absolute,fixed 这三个属性值有一个共同点, 都是相对于某个基点的定位, 不同之处仅仅在于基点不同. 所以, 只要理解了它们的基点是什么, 就很容易掌握这三个属性值. 这三种定位都不会对其他元素的位置产生影响, 因此元素之间可能产生重叠.

div {
    position: relative;
    top: 20px;
}

上面代码中, div 元素从默认位置向下偏移 20px(即距离顶部 20px).

相对定位 (relative)

MDN 的描述:

该关键字下, 元素先放置在未添加定位时的位置, 再在不改变页面布局的前提下调整元素位置 (因此会在此元素未添加定位时所在位置留下空白).

position:relative 对 table-*-group, table-row, table-column, table-cell, table-caption 元素无效.

个人理解: 相对于 normal flow 中的原位置来定位.relative 表示, 相对于默认位置 (即 static 时的位置) 进行偏移, 即定位基点是元素的默认位置. 它必须搭配 top, bottom,left,right 这四个属性一起使用, 用来指定偏移的方向和距离.

<html>
    <head>
        <style type=text/css>
            h2.pos_left {
                position:relative;
                left:-20px
            }
            h2.pos_right {
                position:relative;
                left:20px
            }
        </style>
    </head>

    <body>
        <h2> 这是位于正常位置的标题</h2>
        <h2 class=pos_left> 这个标题相对于其正常位置向左移动</h2>
        <h2 class=pos_right> 这个标题相对于其正常位置向右移动</h2>
        <p> 相对定位会按照元素的原始位置对该元素进行移动.</p>
        <p> 样式 left:-20px 从元素的原始左侧位置减去 20 像素.</p>
        <p> 样式 left:20px 向元素的原始左侧位置增加 20 像素.</p>
    </body>

</html>

绝对定位 (absolute)

不为元素预留空间, 通过指定元素相对于最近的非 static 定位祖先元素的偏移, 来确定元素位置. 绝对定位的元素可以设置外边距 (margin), 且不会与其他边距合并.

个人理解: 生成绝对定位的元素, 其相对于 static 定位以外的第一个父元素进行定位, 会脱离 normal flow. 注意: 是除了 static 外. absolute 表示, 相对于上级元素 (一般是父元素) 进行偏移, 即定位基点是父元素. 它有一个重要的限制条件: 定位基点 (一般是父元素) 不能是 static 定位, 否则定位基点就会变成整个网页的根元素 html. 另外, absolute 定位也必须搭配 top, bottom,left,right 这四个属性一起使用.

<html>
    <head>
        <style type=text/css>
            h2.pos_abs {
                position:absolute;
                left:100px;
                top:150px
            }
        </style>
    </head>

    <body>
        <h2 class=pos_abs> 这是带有绝对定位的标题</h2>
        <p> 通过绝对定位, 元素可以放置到页面上的任何位置.
           下面的标题距离页面左侧 100px, 距离页面顶部 150px.</p>
    </body>

</html>

另一个例子:

<html>

<head>
    <style type=text/css>
        body,
        html {
            margin: 0;
            padding: 0;
        }

        #father {
            position: static;
            margin-top: 100px;
            width: 100px;
            height: 100px;
            background-color: green;
        }

        #son {
            position: absolute;
            top: 20px;
            width: 100px;
            height: 100px;
            background-color: red;
        }

        #father1 {
            position: relative;
            top: 100px;
            width: 100px;
            height: 100px;
            background-color: green;
        }

        #son1 {
            position: absolute;
            top: 50px;
            width: 200px;
            height: 200px;
            background-color: red;
        }
    </style>
</head>

<body>
    <div id=father>
        <div id=son></div>
    </div>

    <div id=father1>
        <div id=son1></div>
    </div>
</body>

</html>

上面代码中, 父元素是 relative 定位, 子元素是 absolute 定位, 所以子元素的定位基点是父元素, 相对于父元素的顶部向下偏移 20px. 如果父元素是 static 定位, 上例的子元素就是距离网页的顶部向下偏移 20px.注意, absolute 定位的元素会被正常页面流忽略, 即在正常页面流中, 该元素所占空间为零, 周边元素不受影响.

固定定位 (fixed)

不为元素预留空间, 而是通过指定元素相对于屏幕视口 (viewport) 的位置来指定元素位置. 元素的位置在屏幕滚动时不会改变. 打印时, 元素会出现在的每页的固定位置.fixed 属性会创建新的层叠上下文. 当元素祖先的 transform 属性非 none 时, 容器由视口改为该祖先.

<html>
    <head>
        <style type=text/css>
            p.one {
                position:fixed;
                left:5px;
                top:5px;
            }

            p.two {
                position:fixed;
                top:30px;
                right:5px;
            }
        </style>
    </head>
    <body>
        <p class=one> 一些文本.</p>
        <p class=two> 更多的文本.</p>
    </body>
</html>

fixed 表示, 相对于视口 (viewport, 浏览器窗口) 进行偏移, 即定位基点是浏览器窗口. 这会导致元素的位置不随页面滚动而变化, 好像固定在网页上一样. 它如果搭配 top, bottom,left,right 这四个属性一起使用, 表示元素的初始位置是基于视口计算的, 否则初始位置就是元素的默认位置.

div {
    position: fixed;
    top: 0;
}

上面代码中, div 元素始终在视口顶部, 不随网页滚动而变化.

sticky

sticky 跟前面四个属性值都不一样, 它会产生动态效果, 很像 relative 和 fixed 的结合: 一些时候是 relative 定位 (定位基点是自身默认位置), 另一些时候自动变成 fixed 定位 (定位基点是视口). 因此, 它能够形成动态固定的效果. 比如, 网页的搜索工具栏, 初始加载时在自己的默认位置 (relative 定位).

页面向下滚动时, 工具栏变成固定位置, 始终停留在页面头部 (fixed 定位). 等到页面重新向上滚动回到原位, 工具栏也会回到默认位置. sticky 生效的前提是, 必须搭配 top, bottom,left,right 这四个属性一起使用, 不能省略, 否则等同于 relative 定位, 不产生动态固定的效果. 原因是这四个属性用来定义偏移距离, 浏览器把它当作 sticky 的生效门槛.

它的具体规则是, 当页面滚动, 父元素开始脱离视口时 (即部分不可见), 只要与 sticky 元素的距离达到生效门槛, relative 定位自动切换为 fixed 定位; 等到父元素完全脱离视口时 (即完全不可见), fixed 定位自动切换回 relative 定位. 请看下面的示例代码.(注意, 除了已被淘汰的 IE 以外, 其他浏览器目前都支持 sticky. 但是, Safari 浏览器需要加上浏览器前缀-webkit-.)

<! DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        body,
        html {
            margin: 0;
            padding: 0;

        }

        #toolbar {
            position: sticky;
            top: 20px;
            height: 100px;
            width: 100px;
            background-color: hotpink;
        }
    </style>
</head>

<body>

    <div style="height: 1900px;">
        <div style="height: 500px; background-color: khaki;">
            <div id="toolbar"></div>
        </div>
    </div>
</body>

</html>

原来是这么玩儿的, 还挺有意思的.

上面代码中, 页面向下滚动时,#toolbar的父元素开始脱离视口, 一旦视口的顶部与#toolbar的距离小于 20px(门槛值), #toolbar 就自动变为 fixed 定位, 保持与视口顶部 20px 的距离. 页面继续向下滚动, 父元素彻底离开视口 (即整个父元素完全不可见),#toolbar恢复成 relative 定位.

sticky 的应用

sticky 定位可以实现一些很有用的效果. 除了上面提到动态固定效果, 这里再介绍两个.

堆叠效果

堆叠效果 (stacking) 指的是页面滚动时, 下方的元素覆盖上方的元素. 下面是一个图片堆叠的例子, 下方的图片会随着页面滚动, 覆盖上方的图片.

<div>
    <img src=pic1.jpg>
</div>
<div>
    <img src=pic2.jpg>
</div>
<div>
    <img src=pic3.jpg>
</div>

CSS 代码极其简单, 只要两行.

div {
    position: sticky;
    top: 0;
}

它的原理是页面向下滚动时, 每张图片都会变成 fixed 定位, 导致后一张图片重叠在前一张图片上面. 详细解释可以看这里.

表格的表头锁定

大型表格滚动的时候, 表头始终固定, 也可以用 sticky 实现 (查看 demo).CSS 代码也很简单.

th {
    position: sticky;
    top: 0;
}

需要注意的是, sticky 必须设在<th>元素上面, 不能设在<thead>和<tr>元素, 因为这两个元素没有 relative 定位, 也就无法产生 sticky 效果. 详细解释可以看这里.

其他

当含有 position 属性的元素为最边缘元素时:

absolute 和 relative : 含有此 2 个值的边缘元素, 浏览器缩小到此元素不可见时, 会出现滚动条.
fixed : 含有此值的边缘元素, 浏览器缩小到此元素不可见时, 不会出现滚动条.
设置定位属性后, 盒子变为行内块, 可以设置盒子宽高等;
不论设置定位与否, 子盒子永远浮于父亲盒子前;
同级标签元素设置相同定位属性, 后边盒子浮于前边盒子之上 (根据标签盒子在 HTML 结构中的排版声明顺序)

例: 1. 设置兄弟盒子都为绝对定位或者固定定位 (效果相同)

<style>
    .father {
        width: 100px;
        height: 100px;
        background: #ff0;
    }
.box1 {
width: 50px;
height: 100px;
background: #f00;
line-height: 180px;
}
.box2 {
width: 60px;
height: 50px;
background: #0ff;
line-height: 50px;
}
</style>
</head>
<body>
<div class=father>
<div class=box1>box1</div>
<div class=box2>box2</div>
</div>
</body>

观察效果:

1. 不设置定位的效果:
1. 给两个兄弟子标签设置绝对 (absolute) 定位或固定 (fixed) 定位效果 (两个属性想过相同):

<style>
.father {
width: 100px;
height: 100px;
background: #ff0;
/* position: absolute; */
}
.box1 {
width: 50px;
height: 100px;
background: #f00;
line-height: 180px;
position: absolute;
}
.box2 {
width: 60px;
height: 50px;
background: #0ff;
line-height: 50px;
position: absolute;
}
</style>
</head>
<body>
<div class=father>
<div class=box1>box1</div>
<div class=box2>box2</div>
</div>
</body>

说明: 在设置定位属性后, 定位盒子会脱离文本流出现上浮效果, 有异于 float 浮动的浮动, 上层盒子会完全盖住下层盒子 (包括文本), 而对于 float 的浮动, 上层只会盖住下层盒子背景, 但是会和下层文本共层, 从而出现文本环绕的效果 (float 浮动设计初衷——文本环绕图片样式). 这里没有将 relative 相对定位拿出来的原因是, 相对定位出现效果会有差异, 但是原理大同小异 (推测). relative 相对定位: 给两兄弟共同设置相对定位属性:

<style>
.father {
width: 100px;
height: 100px;
background: #ff0;
/* position: absolute; */
}
.box1 {
width: 50px;
height: 100px;
background: #f00;
/* top: 10px; */
line-height: 180px;
position: relative;
}
.box2 {
width: 60px;
height: 50px;
background: #0ff;
line-height: 50px;
position: relative;
}
</style>
</head>
<body>
<div class=father>
<div class=box1>box1</div>
<div class=box2>box2</div>
</div>
</body>

可以看到相对定位后, 两个盒子层次似乎没有改变, 还是独行显示, 那是否相对定位不会使布局脱离文本流呢? 答案是否定的. 首先, 对于相对 relative 定位的概念是, 盒子相对于当前位置通过 top, bottom 等属性改变位置, 而当前并没有改变位置, 故不会移位, 也就看不出效果, 不像 fixed 和 absolute 分别起始都是居于屏幕坐标和浏览器页面坐标的原点 (即屏幕左上角), 移位也是居于屏幕和浏览器页面; 所以我们移位试试, 设置 box1 top:10px;, 查看效果. 果然我的结论是正确的, relative 相对和另外两个定位属性实际效果是一样的, 都会是定位盒子上浮, 而同层级后面兄弟盒子的 Z-Index 高于前面盒子.

结论: 设置定位属性有时可能醉翁之意不在酒, 并不是为了定盒子位置, 而是设置盒子层级, 出现这种层叠效果 (Z-Index 属性作用).z-index 只能与定位属性配合使用, 正常文档流无法使用.z-index:1~9999, 设置显示优先级别, 默认都为 1, 后面的覆盖在前面属性的上面.

absolute 同时设置 left, right,top,bottom 遵循以下原则:

如果 top 和 bottom 一同存在的话, 那么只有 top 生效.
如果 left 和 right 一同存在的话, 那么只有 left 生效.

margin 注意事项: 当通过 background 直接设置背景图片, 再设置当前属性 hover 时, 需要设置 background-color 属性, 不然会使图片背景也被覆盖.

position 注意事项

当 position 属性值为 relative 时对象原来占有的位置保留, 其后面的对象按原来文档流仍然保持原来的位置.

top 的值表示对象相对原位置向下偏移的距离, bottom 的值表示对象相对原位置向上偏移的距离两者同时存在时, 只有 top 起作用.left 的值表示对象相对原位置向右偏移的距离, right 的值表示对象相对原位置向左偏移的距离两者同时存在时, 只有 left 起作用.

当 position 属性值为 absolute 时对象从文档流中抽取出来, 原占有的位置被后面的对象顶替上来.

top 的值表示对象上边框与浏览器窗口顶部的距离, bottom 的值表示对象下边框与浏览器窗口底部的距离两者同时存在时, 只有 top 起作用; 如果两者都未指定, 则其顶端将与原文档流位置一致, 即垂直保持位置不变.left 的值表示对象左边框与浏览器窗口左边的距离, right 的值表示对象右边框与浏览器窗口右边的距离两者同时存在时, 只有 left 起作用; 如果两者都未指定, 则其左边将与原文档流位置一致, 即水平保持位置不变.

在 position 属性值为 absolute 的同时, 如果有一级父对象 (无论是父对象还是祖父对象, 或者再高的辈分, 一样) 的 position 属性值为 relative 时, 则上述的相对浏览器窗口定位将会变成相对父对象定位, 这对精确定位是很有帮助的.

positon 与 display

元素分为内联元素和区块元素两类 (当然也有其它的), 在内联元素中有个非常重要的常识, 即内联元素是不可以设置区块元素所具有的样式, 例如 width | height.

relative : 原来是什么类型的依旧是什么类型;
absolute | fixed : 元素就被重置为了区块元素.

例如: 打算为 span 元素指定大小, 并绝对定位 <span style=position:absolute; width:100px; height:50px;>span</span>这是完全正确的,<span style=position:absolute; display:block; width:100px; height:100px;>span</span>, 这里的display:block就是多余的了.

position 与 float

一个元素若设置了 position:absolute | fixed; 则该元素就不能设置 float. 这是一个常识性的知识点,因为这是两个不同的流, 一个是浮动流, 另一个是定位流. 但是 relative 却可以. 因为它原本所占的空间仍然占据文档流.

关于 position 使用一般会引发的问题:

假如有一个默认 100%宽度的 div, 一旦加上 absolute 绝对定位, 该元素立马 inline-block 化, 默认宽度就会自适应元素内部宽度, 会导致页面的宽高塌陷.
由于 absolute 绝对定位的灵活性, 对于普通的页面布局, 有时出于省事的原因很容易造成 absolute/relative/top/left/z-index 的滥用, 这样会使后期的扩展和维护造成麻烦.
absolute 绝对定位: 对象 absolut 属性相对于父级 div 偏移, 脱离文档流, 宽高塌陷, 在文档流之上.

float 浮动

float 的定义

float 属性定义元素向左/右方向浮动. 浮动元素会生成一个块级框, 而不论它本身是何种元素.float 的值:left/right/none.

float 实现文字环绕

带有浮动属性的元素也可以使元素 inline-block 化, 具有包裹性, 使得元素兼并了块元素和内联元素的的优点. 带有浮动属性的元素会脱离标准流进行排列布局, 脱离标准流后的浮动元素漂浮在正常块元素上面, 但是依然占据正常文档流的文本空间, 使得后面的文本以除了浮动元素之外的空间为排列基准, 形成了文本环绕的效果.

<style>
.a{width: 200px;height: 400px;margin: 0 auto;border: 1px solid #000;}
.pic{float: left;}
p{font-size: 16px;line-height: 18px;font-family: Microsoft Yahei}
</style>
</head>
<body>
<div class=a>
<img src=2.jpg width=100 width=100 class=pic>
<p> 这是一段测试文字啦啦啦啦啦这是一段测试文字啊啊啊啊啊这是一
段文字显示呐呐呐呐这是一段文字显示啦啦啦啦啦</p>
</div>

为什么要清除浮动以及清除浮动的几个方法

由于浮动导致元素高度塌陷产生副作用, 父级盒子的边框不能被撑开, 背景不能显示, 父子级间的 margin 和 padding 设置值不能正确被显示. CSS 中有三种基本的定位机制: 普通流, 浮动和绝对定位.

我们先看看他们的解释和描述:

普通流: 默认情况下, 所有框都在普通流中定位. 按照你所写的 html, 顺序的排列, 块级元素从上到下一个接一个地排列; 块级元素之间的垂直距离由其定义的 margin-top, margin-bottom 决定. 行内元素则在一行中水平布置. 利用 margin-left/right, padding-left/right, 来调整它们之间的水平距离.
相对定位:position:relative; 如果一个元素的设置该属性为 relative, 那么就激活了该元素 left 和 top 属性, 利用这两个属性, 该元素就相对于它自身原本在普通文档流中的位置进行偏移, 但无论如何进行移动, 元素仍然占据原来的空间, 仍然属于普通流.
绝对定位:position:absolute; 绝对定位使元素的位置与文档流无关, 因此不占据空间. 普通文档流中的其他元素在布局的时候就像绝对定位的元素不存在时一样, 绝对定位的元素的位置是相对于最近的已定位祖先元素 (position:relative/absolute). 如果元素没有已定位的祖先元素, 那么它的位置相对于最初的包含块. 同时因为绝对定位的框与文档流无关, 所以它们可以覆盖页面上的其他元素. 可以通过设置 z-index 属性来控制这些框的堆放次序.z-index 值越高, 框在堆中的位置就越高.

浮动模型. 浮动的元素脱离普通文档流, 向左或者向右移动, 直到它的边缘碰到包含框或者另一个浮动框的边缘. 因为浮动框不在文档的普通流中, 所以文档的普通流中的块框表现得就像浮动框不存在一样. 想象下:

static+非 float 比作一条可以注水成冰的河流, static+float 是冰上浮动的木头盒;
absolute 是夹心层, 可以插入很多层的彩色激光层, 无形且可以穿透的光层;
relative 是 static 基于激光层的对称的倒影层 (relative+float 是 static+float 的投影层, ralative+非 float 是 static+非 float 的投影层), 投影层可以通过 left, top 等产生位置偏移. 不过因为是投影, 就算设置了 left, top 等产生偏移, 跟其他的 relative 也只会出现重叠, 而不是相互挤压.

下面我们来详细阐述下: (一) 先理解清楚 static+非 float, static+float 定位规则 (先忽略上面的 absolute 和 relative 层来看问题); 1, static+非 float 区域 (如果 div 没有设置 position, 或者标注为 position:static) 是像一条河流, 里面可以按块分区域注水结成冰块. 我们知道 div 是块级元素, 所以注入水结成冰的时候, 都是按整行设置围栏注入水的 (即使 div 设置了宽度, 未注入的地方也会被占据位置). 如下图: 虽然我们看到的红色和绿色只有左边小块, 但是占据了整行. 如果先布局的 float 和 absolute 的对象, 因为下面对应的 static+非 float 区域是空的, 再添加 static+非 float 区域时会在 float 对象下面开始填充; 如果先布局 static+非 float, 则会成了一个隔离栏带, 之后的需要重新换新行排列. 如上图中的黑色就算是 absolute 也要新行里面布局, 如果 float 对象也是如此. 换言之: 但是当 static+非 float 有空的区域才可能有上面的 float 对象, absolute. 2, static+float, 我们把这个比作一块一块颗漂浮的方形木头盒. 设置了 float 的 div 不再占据整行, 而是按照实际的宽度漂浮在 static 区域的上面. 如 1 所述, 如果 static+非 float 区域如果有冰柱, 上面不能漂浮其他东西. 但是相反, 如果先有了 static+float 的木头盒, 因为下面 static 区域是空置的可以填充, 但是是从 float 区域的下一行填充. 如下图 black 占据 2 行高度, 其中第一行位置是在 float 的下面, 被遮挡了. (二)relative 的定位跟 static 对应区域一样, 只是位置上基于 absolute 层对称投影到上面去了. 1, relative+float 的位置可以先按照 static+float 是在哪个位置? 然后偏移浮起到 relative+float 层, 但是 static+float 中的位置继续保留. 所以 relative+float 跟 static+float 类似, 也是漂浮的, relative+float 跟 static+float 不会出现重叠, 而是紧挨着排列. 如下图, float 的对象相互紧挨着漂浮. 再看下图, 对 relative+float 设置了 left 产生了偏移, 但是不会影响后面 float 的位置, 并且偏移导致了投影重叠, 但是不会出现相互挤压. 2, relative+非 float 的位置同上类似, 也是会形成一个隔离带. 可以先看看 static+非 float 时排在哪个位置, 然后投影上去 relative+非 float 区域. 如下图设置了 red 的 top, 只是本身位置产生了偏移和下面的 green 重叠了, 但是并不会挤压 green 导致位移. (三)absolute 不影响其他区域的布局. - absolute 比较简单, 是夹在中间的激光层, 可以像纸张一样多个相互重叠;

float 对应不会影响他的位置, static+非 float 和 relative+非 float 是个隔离带, 如果之后出现 absolute 需要换行布局;
但是如果先有的 absolute, 再出现"static+非 float 和 relative+非 float", 则不会影响"static+非 float 和 relative+非 float"的布局.

其他

只有非 static 的对象 (absolute, relative+float, relative+非 float) 设置 left, top,right,bottom 才有作用.
absolute 加上 float 是没有意义的.
父 div 需要靠子 div 支撑宽度, 高度. 但是只能依赖文档流, 即 static+非 float 区域 (relative+非 float 也是特殊的 static+非 float).

如果想要 float 区域也支撑父 div. 有 2 种办法:

父级设置 overflow: hidden(overflow: hidden 要有宽度或者高度才会溢出部分隐藏, 如果外部盒子没有宽度或者高度, 里面又是浮动元素, 就会被撑开)
在 float 后面加 <div style="clear:both"></div>, 相当于加了一个隔离支撑板, 这样也会撑开父级

示例代码

<html>
    <head>
    </head>
    <body>
        <!-- rel 是 static 类似的普通流, 只是 rel 激活了 left 和 top 等属性,
             可以位移, 位移后原来的位置还保留了. 并且位移后不会影响其他的位置
        -->
        <!-- abs 和 float 都是在 res 和 static 隔离后新行创建 -->
        <div style=background:yellow;padding:2px;position:relative;width:800px;margin-top:100px;>
            <div style=background:red;width:300px;>1</div>
            <div style=background:green;width:300px;>2</div>
            <div style=background:black;width:200px;position:absolute>4</div>
        </div>

        <!-- black 在 red 和 green 下一行开始填充, 并占据 red 和 green 下面的位置.
             black 占据 2 行位置, 并且 float 的漂浮在 static 上面 -->
        <div style=background:yellow;padding:2px;position:relative;width:800px;margin-top:100px;>
            <div style=background:red;width:300px;float:left;>1</div>
            <div style=background:green;width:300px;float:left;>2</div>
            <div style=background:black;width:200px;>4</div>
        </div>

        <!-- float 不会重现重叠, 都是按顺序漂浮
             去掉 relateive 的 float, 因为 static 虽然有浮动, 但是下面可以有文档流,
             所以在 static 的 float 下面开始文档流, 只是这个 rel 的 div 需要独占一行,
             所以下面一行也会占据.-->
        <div style=background:yellow;padding:2px;position:relative;width:800px;margin-top:100px;>
            <div style=background:red;width:100px;float:left;>1</div>
            <div style=background:green;width:100px;float:left;>2</div>
            <div style=background:blue;width:200px;position:relative;float:left;>4</div>
            <div style=background:black;width:200px;position:relative;float:left;>4</div>
        </div>

        <!-- relative 层是个可重叠的, 设置 top, left 等不会出现相互挤压,
             而是会重叠 -->
        <div style=background:yellow;padding:2px;position:relative;width:800px;margin-top:100px;>
            <div style=background:red;width:300px;position:relative;top: 5px;>1</div>
            <div style=background:green;width:300px;position:relative;>2</div>
        </div>

        <!--其他示例------>

        <!--static 的 float 对象设置 left, top,right,bottom 没有作用--->
        <div style=background:yellow;padding:2px;position:relative;width:800px;margin-top:100px;>
            <div style=background:blue;width:100px;position:absolute>3</div>
            <div style=background:black;width:200px;position:relative>4</div>
            <div style=background:red;width:300px;float:left;>1</div>
            <div style=background:green;width:300px;float:left;>2</div>
        </div>

        <!-- 将 red;width:300px 改成变成 700px 后, black 占据了 3 行 -->
        <div style=background:yellow;padding:2px;position:relative;width:800px;margin-top:100px;>
            <div style=background:blue;width:100px;position:absolute>3</div>
            <div style=background:red;width:300px;float:left;>1</div>
            <div style=background:green;width:300px;float:left;>2</div>
            <div style=background:black;width:200px;position:relative>4</div>
        </div>

        <!-- 将 position: absolute; 加上 float:left.float 加了没有作用 -->
        <div style=background:yellow;padding:2px;position:relative;width:800px;margin-top:100px;>
            <div style=background:black;width:200px;position:relative>4</div>
            <div style=background:blue;width:100px;position:absolute>3</div>
            <div style=background:red;width:300px;float:left;>1</div>
            <div style=background:blue;width:200px;position:absolute>3</div>
            <div style=background:green;width:300px;float:left;>2</div>
        </div>

        <!-- relative 的 black 紧挨着 static 的 green 进行排列;float 没有影响 absolute, relative 的布局;
             absolute 也没有影响 relative 的布局 -->
        <div style=background:yellow;padding:2px;position:relative;width:800px;margin-top:100px;>
            <div style=background:red;width:300px;>1</div>
            <div style=background:green;width:300px;>2</div>
            <div style=background:red;width:300px;float:left;>1</div>
            <div style=background:green;width:300px;float:left;>2</div>
            <div style=background:black;width:200px;position:absolute>4</div>
            <div style=background:black;width:200px;position:relative>4</div>
        </div>

        <!-- 去掉 4 的 position:relative, 即变成 static 看看效果? -->
        <!-- 4 里面加上 float=left 会出现什么效果, 在 relative 层浮动, 没有了独占一行的特性,
             并且跟 float 层相互影响, 按顺序浮动 -->
        <div style=background:yellow;padding:2px;position:relative;width:800px;margin-top:100px;>
            <div style=background:red;width:300px;float:left;>1</div>
            <div style=background:green;width:300px;float:left;>2</div>
            <div style=background:blue;width:100px;position:absolute>3</div>
            <div style=background:black;width:200px;position:relative>4</div>
        </div>

        <!-- absolute 和 float 不会影响父级 div 大小,
             static 是文档流才会影响 (relative 也是特殊的 static) 可以设置下面的撑开下级:
             1, 父级设置 overflow: hidden(overflow:hidden 要有宽度或者高度
                才会溢出部分隐藏, 如果外部盒子没有宽度或者高度, 里面又是浮动元素, 就会被撑开)
             2, 在 float 后面加 <div style=clear:both></div>, 相当于加了一个隔离支撑板
        -->
        <div style=background:yellow;padding:2px;position:relative;width:800px;margin-top:100px;>
            <div style=background:blue;width:100px;position:absolute>3</div>
            <div style=background:red;width:300px;float:left;>1</div>
            <div style=background:green;width:300px;float:left;>2</div>
            <div style=clear:both></div>
            <div style=background:green;width:300px;float:left;>2</div>
            <div style=background:blue;width:100px;position:absolute>3</div>
            <div style=background:black;width:200px;position:relative>4</div>
        </div>
    </body>
</html>