Unit7-定位和层叠上下文

Css in depth 第七章笔记

前面介绍的几种布局方式都是按照display属性来的，这次介绍的定位是由 position 决定，position属性的初始值是static，一旦这个值被改变来我们就说这个元素被定位了，接下来就了解一下定位的具体方式吧

固定定位

因为固定定位用的较少，就先从它开始了。
固定定位的属性值就是 position:fixed;
还需要搭配 top/bottom/left/right 四个属性，这些属性决定了定位元素和浏览器视口的距离，这四个值还隐式的定义了元素的宽高，比如指定left:2em;right:2em;则元素的宽度就是浏览器视口减去4em。
被固定定位后的元素会固定在浏览器视口的某个位置，并脱离原本的位置。(广告啊弹窗啥的)

绝对定位

首先绝对定位不像固定定位的元素那样相对于浏览器视口实现边偏移(top/bottom/right/left)，它是相对于自身的被定位的祖先元素(有爹找爹没爹找爷)来说的，如果没有祖先元素才会找到浏览器，添加了绝对定位的元素也会释放原来的位置。绝对定位经常和Js配合实现下拉菜单，消息盒子，工具提示等功能，在这之前，我们先看看它必须得有的搭档，相对定位

相对定位

被相对定位的元素是相对于自身原本占有的位置进行移动的，会保留原本拥有的位置。但添加了相对定位的元素我们不会移动它，我们会把它当作绝对定位元素的祖先容器，这就是所谓的子绝父相
因为添加绝对定位的子元素可以放在父容器的任何地方，同时释放自身原有位置也不会影响其他兄弟元素的位置，而容器盒子需要添加一个定位限制住子盒子定位在自身内部，最后容器盒子布局需要在标准流中占一个位置，因此就有了子绝父相这句话的由来。

z-index

定位多了都脱离原来位置了，就容易发生层叠，用z-index属性就好，可以理解为一个z轴嘛，值越大z坐标越高元素位置越高，就不会被其他元素覆盖层叠了。

粘性定位

粘性定位是固定定位和相对定位的结合，把被粘性定位定位后的某元素固定在浏览器某个位置，一开始会随着浏览器视口的滚动而滚动，到达特定位置后就不会再变了，占有原先位置。

定位到这也就结束啦x