CSS定位相关知识：static、relative、absolute

CSS定位相关知识：static、relative、absolute

position可选值

1. static 默认值，元素是静止的，没有开启定位，写与不写没有区别；
2. relative 开启元素的相对定位；
3. absolute 开启元素的绝对定位；
4. fixed 开启元素的固定定位；
5. sticky 开启元素的粘滞定位；

文档流 定位方式

1. 在html中，默认使用流式布局
2. 流式布局：在一个html中每个元素都有自己的位置，行元素和行内块元素从左到右，块元素从上到下的布局方式
   文档流：在一个页面中，在文档流中的元素都有自己的位置，如果某个元素脱离了文档流，那么它将不再参与流式布局，不再拥有自己的位置。
3. 块元素：如果脱离了文档流，那么它将不再参照父元素的宽度定宽，所以脱离文档流的块元素，如果没有内容，则必须设置宽高，如果有内容，那么它的宽高将取决于它内容的宽高。

position表示元素的定位方式

1. static
   表示静态定位，也是元素默认的定位方式，参与流式布局（在文档流中），不能设置位置

2. relative
   表示相对定位（相对于自身原有的位置进行定位的）, 不会脱离文档流，依旧参与流式布局，原有的位置依旧还在

3. absolute
   表示绝对定位（绝对定位会使元素脱离文档流，不再参与流式布局，即在文档流中不再拥有自己的位置）, 它会先查看它的父元素是否为静态定位static(也就是没有设置定位)，如果不是，就相对于父元素进行定位，如果是静态定位static(也就是没有设置定位)，那么就查看它父元素的父元素是否为静态定位，一直查找到不是静态定位为止，如果查找到html都为静态定位，就相对于html页面进行定位。
   所以，如果想让一个元素相对于它的父元素进行定位，那么就把它的父元素定位方式设置成非静态定位即可，一般情况下设置成relative相对定位，因为相对定位不会破坏父元素的流式布局

4. fixed
   表示固定定位，会使元素脱离文档流，不再参与流式布局，在文档流中将没有它的位置

相对定位的特点：

1. 元素开启相对定位后，如果不设置偏移量元素不会发生任何变化；
2. 相对定位是参照于元素在文档流中的位置来定位的；
3. 相对定位会提升元素的层级；
4. 相对定位不会使元素脱离文档流；
5. 相对定位不会改变元素的性质，块还是块，行内还是行内；

绝对定位的特点：

1. 开启绝对定位后，如果不设置偏移量元素的位置不会发生变化；
2. 元素会从文档流中脱离；
3. 绝对定位会改变元素的性质，因为脱离文档流了，行内变成块，块的高度被内容撑开；
4. 绝对定位会使元素提升一个层级；
5. 绝对定位元素是相对于其包含块进行定位的。

包含块containing block：

1. 正常情况下：包含块就是离当前元素最近的祖先块元素；
2. 开启绝对定位情况下：包含块就是离他最近的开启了定位的祖先元素；如果所有的祖先元素都没有开启定位，则相对于根元素进行定位；
   html–叫根元素，也叫初始包含块；

固定定位

1. 固定定位：position的属性定义为fixed则开启了元素的固定定位；固定定位也是一种绝对定位，所以固定定位的大部分特点和绝对定位一样。固定定位是一种特殊的决定定位；
2. 和绝对定位不同 的特点：
   唯一不用的是固定定位永远参照于浏览器的视口进行定位；固定定位的元素不会随网页的滚动条滚动。
   使用场景：广告条等。

粘滞定位

1. 粘滞定位是比较新的定位方法，老的浏览器可能不支持。粘滞定位和相对定位比较相近。当一个元素滚动到一定高度的时候就不动了。
2. 当开启了决定定位后，水平方向的布局等式就要添加left和right两个值，规则和之前一样，只是多添加了2个值。当发生过度约束，9个值中没有auto，则自动调整right值以使等式满足。如果有auto，则自动调整auto的值。
   可以设置auto的有：margin width left right。
3. 因为left和right默认值是auto，如果不设置left和right，则等式不满足时，会自动调整这两个值。

z-index

1. 对于开启了定位的元素，可以通过z-index属性来指定元素的层级，z-index需要一个整数作为参数，值越大元素的层级越高，元素的层级越高越优先显示。
2. 如果元素的层级一样，优先显示靠下的元素。
3. 祖先元素的层级再高也不会盖住后代元素。祖先元素永远盖不住后代元素。