CSS 学习笔记 - 定位

定位类型偏移类型深度控制参考资料

定位类型

div { position: static| relative | absolute| fixed | sticky; } 类型名称说明static文档流元素在文档流中的正常行为。此时 top, right, bottom, left 和 z-index 属性无效。relative相对定位保留文档流中的占位，相对于自己原来的位置进行偏移。absolute绝对定位脱离文档流。相对于最近一个脱离文档流的祖先元素进行偏移。元素拥有行内块特性。fixed固定定位固定在屏幕视口上，不受滚动影响。创建新的层叠上下文。例：页面右下角的浮动广告sticky粘性定位relative和fixed的混合。元素在跨越特定阈值前为相对定位，之后为固定定位。例： 实现滚动文章时，段落标题吸附在容器顶部的效果 sticky同级效果：后覆盖前。非同级效果：后将前挤出。

偏移类型

relative | absolute| fixed 定位类型时有效设置偏移后，将不再受父元素的padding影响。元素heightorwidth未指定时（即auto），可以设置top:0;bottom:0;垂直拉满。水平同理。 类型说明top距离顶边偏移bottom距离下边偏移left距离左部偏移right距离右边偏移

深度控制

子元素在父元素之上同一层级z-index大的在上。

参考资料

MDN：CSS_定位_Positioning MDN：CSS属性值定义语法 后盾人：定位布局