position

详解CSS position属性

通过position属性，我们可以让元素相对于其正常位置(relative)，父元素(absolute)或者浏览器窗口(fixed)进行偏移。

position四种类型
（1）static
position属性的默认值，默认情况下，块级元素和行内元素按照各自的特性进行显示
（2）relative
相对定位，设置了这个属性后，元素会根据top，left，bottom，right进行偏移，关键点是它原本的空间仍然保留。

（3）absolute
元素设置成absolute后会脱离文档流，并且不占有原本的空间，后面的元素会顶替上去，而且不论元素是行内元素还是块级元素，都会生成一个块级框，也就是例如行内元素span设置了absolute后就可以设置height和width属性了。

（4）fixed
fixed的表现方式类似于absolute，但是相比于absolute相对于不确定的父元素进行偏移，fixed就是相对于浏览器窗口进行偏移。

包含块
在详解CSS float属性中有提到包含块这个概念。对于position属性也有包含块这个属性，它

要分几种情况来讨论：
1.根元素的包含块，根元素一般是html元素，有些浏览器会使用body作为根元素，大多数浏览器，初始包含块是一个视窗大小的矩形
2.非根元素的包含块，如果该元素的position是relative或static，它的包含块是最近的块级框，表的单元格或行内块的内容边界。

3.非根元素的包含块，如果该元素的position是absolute，则包含块为最近的position不是static的祖先元素。
简单来说，它的包含块会从父级元素一直向上查找，找到第一个position不是static的元素为止。

偏移属性
前面的例子中已经涉及到偏移属性，它指的是元素相对于其包含块的偏移，我们称其为偏移属性，分别是top，bottom，left，right，依次代表上下左右。他们的值可以是具体的数值，也可以是百分比。如果是百分比，top和bottom是相对于包含块高度的百分比，left和right是相对于宽度的百分比。它们也可以设置负值，即有可能将元素移动到包含块的外边。

---

绝对定位
1、基本的绝对定位
一个元素被设置为绝对定位时，会脱离文档流，然后相对其包含块进行偏移。

一般来说，我们会将一个元素设置为relative来作为absolute元素的包含块。

示例中有两个绝对定位元素，第一个元素没有position不是static的祖先元素，所以它的包含块是body，根据body进行偏移。
第二个绝对定位元素设置了一个relative的父元素，它根据父元素进行偏移。

–
绝对定位的重叠问题(用到z-index属性)

元素设置成绝对定位后会脱离文档流，并且失去占用的空间，而且如果偏移的位置接近，会造成重叠问题。

可以看到，第二个绝对定位元素盖住了第一个元素，那怎么让第一个元素盖住第二个元素呢，这就要用到z-index属性，这个属性表示元素的叠加顺序，默认情况下，z-index为0，数值越高的元素层级越高，就可以盖住低于其层级的元素，我们设置第一个原色的z-index为10，结果如下:

如果两个元素的层级相同，则越后面的元素会覆盖前面的元素，默认情况下，第二个元素就会盖住第一个元素。

固定定位
fixed定位很简单，类似与absoulte，但是它的包含块就是浏览器窗口，相对来说简单很多。常见的应用比如固定导航，回到顶部。

相对定位
relative定位的元素进行偏移后，不会脱离文档流，还有占据原本的空间。

除此之外，我们还要注意一个细节：如果元素设置了margin为负值之后发生重叠的情况下，相对定位的元素会覆盖普通元素。

默认情况下，两个元素都是正常的元素，设置了负的margin属性后，后面的元素会覆盖前面的元素，我们修改第一个元素的class为relative，可以看到效果如下：

添加了相对定位后，第一个元素就会覆盖其他正常的元素了。

relative属性最经常的一个应用应该是作为absolute元素的包含块了，为了限制absolute元素的偏移位置，常常设置其父元素为relative来作为其包含块。