CSS 盒子模型中绝对定位和相对定位

在CSS中，用position属性来定位元素。position属性有4个取值，从而实现 4 种不同类型的定位，这会影响元素框生成的方式。

---

1.static
　　position属性的默认值，表示CSS文档流定位，元素框正常生成。就是按照正常的布局流从上到下从左到右布局，块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。平常我们设计网页时，没有指定 position，也就表示使用 static。

---

2.relative
　　relative属性表示CSS相对定位，设置为相对定位的元素框会偏移原来的位置某个距离。通过top、right、bottom和left属性来设置元素位置的偏移量。但是元素仍然保持其未定位前的形状，而且它原本所占的空间仍保留。如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动。比如，将 top 设置为 20px，那么框将在原位置顶部下面 20 像素的地方；将left 设置为 30 像素，那么会在元素左边创建 30 像素的空间，也就是将元素向右移动。
　　注意：相对定位实际上被看作普通流定位模型（static）的一部分，因为元素的位置相对于它在普通流中的位置。

---

3.absolute
　　 absolute属性设置CSS绝对定位，设置为绝对定位的元素框从文档流完全删除，并相对于其包含块定位，包含块可能是文档中的另一个元素或者是初始包含块（即相对于position属性非static值的最近父级元素进行偏移），如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块。。元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。普通流中其它元素的布局就像绝对定位的元素不存在一样。
4.fixed
　　fixed属性表示CSS固定定位，它的模式与 absolute 相同，不过无论怎么拖动滚动条，它始终固定在屏幕的指定位置。在 IE6 中不支持这个属性；在 IE7 中支持这个属性但需要指明 DOCTYPE；Firefox 等浏览器支持这个属性。fixed定位的top、right、bottom、left 属性指相对于视口的。可以参考各类网站右下角的广告推送窗口。
5.z-index
　　除了上述四个position取值，还有一个比较重要的属性:z-index。z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。通过top和left属性定位元素的x轴和y轴，z-index属性设置一个定位元素沿 z 轴的位置，z 轴定义为垂直延伸到显示区的轴。 如果为正数，则离用户更近，为负数则表示离用户更远。元素可拥有负的 z-index 属性值；Z-index 仅能在绝对定位元素上奏效（position:absolute;）。
举个栗子：

title
 
粘贴这段代码尝试一下

  

---

image.png

image.png