CSS — 定位
CSS中最重要的应该就是布局和定位， 也就是display和position两个属性。
讲布局之前， 先说一下CSS的框模型Box Model, 它规定了元素框解决 元素内容，内边距，边框和外边距的方式
框模型
Box Model
外边距合并
外边距合并意思就是当两个垂直的外边距相遇时，会合并成一个外边距，合并之后外边距的高度是两个外边距中较大的一个。
外边距合并1
当一个元素包含在另一个元素中时（假设没有内边距或者边框把外边距分隔开），它们的上和/或者下外边距也会发生合并。
外边距合并2
文档流
元素按照HTML中的位置顺序元素，块元素（block）独占一行，内联元素（inline），不独占一行
定位
CSS的定位主要是靠position这个属性，它有以下五种选择
- static
- relative
- fixed
- absolute
- sticky
static – 静态定位
元素默认的position属性，浏览器会根据源码的顺序，决定每个元素的位置，就是正常的文档流。 每个区块占据自己的位置， 不会发生重叠(同级区块)。并且此时left，right，top，bottom的属性是无效的，元素的位置由浏览器自主决定。
static.jpg
relative – 相对定位
相对定位是在静态定位的基础上进行偏移。偏移是根据left，right，top，bottom四个属性决定方向和距离。
relative.jpg
此时， 元素仍然处于文档流中，而且，相对定位是不会影响文档流的。
举个例子，
<style type="text/css"> .parent { border: 2px solid red; } .parent div { height: 100px; width: 100px; background-color: red; margin-bottom: 10px; text-align: center; } .div2 { position: relative; background-color: orange !important; top: 200px; left: 20px; }</style><div class="parent"> <div class="div1">test1</div> <div class="div2">test2</div> <div class="div3">test3</div></div>
relative-demo.png
div2 的位置尽管有偏移，但是父元素并没有受其影响，就是说它在文档流中的位置还是和静态布局的位置一样，只是显示的时候有偏移。
absolute-绝对定位
绝对定位是根据第一个定位不为static的父元素进行偏移。假如没有不为static的父元素， 则根据整个网页的根元素HTML进行偏移，偏移的方向和距离根据left，right，top，bottom四个属性决定。绝对定位不会影响页面中的其余元素
就如刚才的例子，假如把div2的定位设为绝对定位，则文档流中只有div1和div3。
absolute-demo.png
fixed-固定定位
固定定位是相似于绝对定位， 但是是相对于浏览器窗口定位， 而且不会受到滚动条的影响。
Example
sticky-粘性定位
粘性定位可以说是相对定位和固定定位的组合，就是可以自动切换相对定位/固定定位。它主要用在对scroll事件的监听上；简单来说，在滑动过程中，某个元素距离其父元素的距离达到粘性定位的要求时(比方top：10px)，这时其效果相当于fixed定位，固定到适当位置。
- Example1
- Example2
使用条件：
- 必需搭配top、bottom、left、right其一使用， 否则相当于相对定位
- 父元素的overflow不能为hidden或者者overflow
- 父元素的高度不能低于sticky元素的高度
- sticky元素仅在其父元素内生效
<!DOCTYPE html><html><head> <title>position</title> <style type="text/css"> .stacking-slide { height: 100vh; width: 100%; position: sticky; top: 0; } .stacking-slide:nth-child(1) { background-color: #ffc2c2; } .stacking-slide:nth-child(2) { background-color: #ffe0c2; } .stacking-slide:nth-child(3) { background-color: #ffffc2; } .stacking-slide:nth-child(4) { background-color: #e0ffc2; } .stacking-slide:nth-child(5) { background-color: #c2ffc2; } </style></head><body> <div class="stacking-slide"> <h2>Section 1</h2> </div> <div class="stacking-slide"> <h2>Section 2</h2> </div> <div class="stacking-slide"> <h2>Section 3</h2> </div> <div class="stacking-slide"> <h2>Section 4</h2> </div> <div class="stacking-slide"> <h2>Section 5</h2> </div></body></html>
