css position属性

position属性指定一个元素（静态的，相对的，绝对或固定）的定位方法的类型。

• absolute 生成绝对定位的元素

脱离文档流生成绝对定位 相对于static定位外的第一个父元素(有定位的父元素，否则一直找到html进行定位)进行定位

• fixed 生成绝对定位的元素

脱离文档流的绝对定位 相对于浏览器窗口进行定位

• relative 生成相对定位的元素

相对于自己本来位置进行相对定位 不脱离文档流 会撑开其他文本

• static 默认值。没有定位，元素出现在正常的流中
• inherit 规定应该从父元素继承 position 属性的值。

设置relative 和absolute后才可用z-index设置堆叠顺序 越大的处于前面

z–index不起作用的三种可能情况:

1. 父标签position属性为relative
2. 问题标签无position属性(不包括static)
3. 问题标签含有浮动属性

那么position跟display、margin collapse、overflow、float这些特性相互叠加后会怎么样？

总的来说，可以把它看作是一个类似优先级的机制，一般情况下优先级

position>float>display

• “position:absolute” 和 “position:fixed” 优先级最高，有它存在的时候，浮动不起作用，‘display’ 的值也需要调整；
• 其次，元素的 ‘float’ 特性的值不是 “none” 的时候或者它是根元素的时候，调整 ‘display’ 的值；
• 最后，非根元素，并且非浮动元素，并且非绝对定位的元素，‘display’ 特性值同设置值。
• 如果 ‘display’ 的值为 ‘none’，那么 ‘position’ 和 ‘float’ 也会不起作用。在这种情况下，元素不产生框。因此浮动和定位无效

这从另一个侧面说明了一个问题：浮动或绝对定位的元素，只能是块元素或表格.

最后上一张流程图

 
 
 
若有错误，请联系博主更改
博文参考地址
https://www.cnblogs.com/jackyWHJ/p/3756087.html