《CSS in depth》第七章
本章讲了position属性。初始值是static。如果改成其他值，就说元素被定位了，反之（保持static）就认为元素未被定位。定位的作用：将元素彻底从文档流中拿走，并允许把它放到屏幕的任何位置，也可以放在另一个元素的前面或者后面，彼此重叠。
固定定位 : 设置position:fixed; 并搭配top/right/bottom/left, 可将元素固定到视口的任意位置。视口称作元素的包含块。这4个长度值代表的是元素距离浏览器视口的边缘的最近距离。
固定定位可以用于将导航栏固定到页面上方，即使滚动条滚动，也不改变导航栏的位置。
固定元素从文档流中移除了，所以不再影响页面其他元素的位置。别的元素会跟随正常文档流，像固定元素不存在一样。
绝对定位：绝对定位的包含块不是视口，而是相对最近的祖先定位元素。其他跟固定定位一样(top/bottom/left/right). 如果祖先元素都没有 定位（定位指的是非static）,那么会相对初始包含块来定位。initial containing block跟视口一样大，固定在网页顶部。绝对定位很重要，经常跟js配合，用于弹出菜单、工具提示以及消息盒子等。
相对定位：给一个元素加上position:relative; 时，周围元素的位置不会改变，相对定位元素可以设置top/left/right/bottom等将它移走。这些值是相对于本元素的初始位置而言。bottom:-1em;相当于top: 1em; 不能一起用bottom和top, 也不能一起用right和left, 否则会忽略bottom和right, 原因显而易见。相对定位的作用一般是给它里面的绝对定位元素创建一个包含块。
层叠上下文和z-index:
浏览器将HTML解析为DOM的同时，还创建了一颗渲染树，代表每个元素的样式和位置。还决定了浏览器绘制元素的顺序。通常情况下，元素在HTML里出现的顺序决定了绘制的顺序。
但是定位元素时，这种行为会改变。浏览器先回执所有非定位元素(static), 后绘制定位元素。默认情况下，所有定位元素会出现在非定位元素前面。
z-index控制层叠顺序。用有较高z-index的元素出现在前面。拥有负数z-index的元素出现在静态元素后面。
z-index的使用：1. 只在定位元素生效；2. 给一个定位元素加上z-index可以创建层叠上下文。一个层叠上下文包含一个元素或者由浏览器一起绘制的一组元素。其中一个元素会作为层叠上下文的根，所有后代元素是这个层叠上下文的一部分。
除了4种主要的定位类型（静态，固定，绝对，相对），还提供一种新的定位类型：粘性定位。是固定和相对的结合体：正常情况下，元素会随着页面滚动，当到达屏幕的特定位置时，继续滚动，他就会锁定在这个位置。常用于侧边栏导航。
