定位

1 定位的概念

1) 除非专门指定，否则所有框都在普通流中定位。也就是说，普通流中的元素的位置由元素在 HTML 中的位置决定。

2) 定位的基本思想很简单，它允许你定义元素相对于其正常位置应该出现的位置，或者相对于父元素甚至浏览器窗口本身的位置。

3) 通过使用 position 属性，我们可以选择 4 种不同类型的定位。

position属性是把元素放置到一个静态的、相对的、绝对的、或固定的位置中。
position属性的四个值分别对应 static、relative、absolute、fixed。

2 相对定位

使用相对定位的盒子,会相对于它原来的位置,通过偏移指定的距离,到达新的位置
使用相对定位的盒子,仍在标准流中,它对父块好兄弟盒子没有任何影响

.box {
    position: relative;
    top: 10px;
    left: 20px;
}

注意：

相对定位可以和浮动一起使用。

3 绝对定位

使用绝对定位的盒子以它"最近"的一个"已经定位"的"祖先元素"为基准进行偏移. 如果没有已经定位的"祖先元素", 那么会以根元素 html 为基准进行定位。
绝对定位的框从标准流中脱离,这意味着它们对其后的兄弟盒子的定位没有影响,其他的盒子就好像这个盒子不存在一样

.box {
    position: absolute;
    top: 10px;
    left: 20px
}

注意：

绝对定位的元素无法再设置浮动。

关于包含块：

绝对定位的元素其实是以他的包含块元素为基准进行定位的，但是元素 position 设置的不同，其包含块也会引起变化。

1) 如果一个元素自身的 position 属性是 static或者是relative：它的包含块就是离他最近的祖先元素或者是格式化上下文。

2) 如果一个元素自身的 position 属性是absolute，它的包含块就是离他最近的拥有定位属性（值不为static）的元素。

3) 如果一个元素自身的 position 属性是 fixed，它的包含块就是离他最近的拥有定位属性（值不为static）的元素。

4) 如果由内向外找不到包含块条件的元素，那么html（根元素）被称作为初始包含块。

3 固定定位

以视口（viewport）为基准进行定位
窗口滚动时,依然保持位置不变

.box {
    position: fixed;
    top: 10px;
    left: 20px;
}

4 空间位置 z-index

4.1 z-index 属性

指定一个定位的元素及其后代的层叠顺序，只有定位元素（非static值）设置 z-index 才可以生效。
z-index的值是数字，没有单位，理论上来说 z-index的值大的元素会覆盖小的元素；z-index 的默认值是 auto。

4.2 z-index 注意事项

如果一个设置了 z-index 属性的定位元素中的子元素也设置了z-index，那么子元素会重新创建一个层叠上下文，子元素的 z-index 只能在当前的层叠上下文中对比排列。

4.3 元素的层叠顺序

5 定位相关CSS属性总结

position 设置定位。值： static(默认值) / relative / position / fixed。
top 设置定位元素位置。
left 设置定位元素位置
right 设置定位元素位置
bottom 设置定位元素位置。
z-index 设置定位元素层级。值：auto(默认值) / 数字。

7. 定位

定位