CSS布局-定位

CSS 定位布局（position）是控制元素在页面中位置的核心技术之一。通过定位，可以实现元素脱离文档流、 层叠、固定在特定位置布局效果（定位跟位置有关）。

属性名：position

设置偏移值：

偏移值设置分为两个方向，水平和垂直方向各选一个使用即可，选取的原则一般是就近原则 （离哪边近用哪个）。

静态定位

静态定位是默认值，就是之前认识的标准流。

position: static;

• 静态定位就是之前标准流，不能通过方位属性进行移动
• 之后说的定位不包括静态定位，一般特指后几种：相对、绝对、固定

相对定位

相对于自己之前的位置进行移动，配合绝对定位组CP（子绝父相），用于小范围的移动。

position: relative;

1. 相对于自身原来位置移动距离。
2. 不脱离正常流，元素原位置仍被保留，其他元素按原布局排列。
3. 可以通过top、bottom、left、 right 属性进行偏移。
4. 优先级：若同时设置top 和 bottom，仅top 生效；同理 left 覆盖 right。

绝对定位

相对于非静态定位的父元素进行定位移动，配合绝对定位组CP（子绝父相）。

position: absolute;

1. 元素脱离正常流，不占据空间，其他元素按原布局排列。
2. 相对于最近的已定位祖先元素（position 非 static）移动位置。若都无定位则相对于视口来定位。
3. 可以通过top、bottom、left、 right 属性进行偏移。
4. 优先级：若同时设置 top 和 bottom，仅 top 生效；同理 left 覆盖 right。

子绝父相

让子元素相对于父元素进行自由移动，父元素是相对定位，则对网页布局影响最小。

• 子元素：绝对定位
• 父元素：相对定位

1. 子元素可以悬浮其他元素上方，就不能占有位置，影响其他元素布局，所以绝对定位。
2. 但是子元素不能随便乱跑，要配合父元素移动位置，此时父元素需要加定位。
3. 父元素需要占原来的位置，不能影响其他元素布局，此时相对定位最合适。

子绝父相水平居中操作：

left: 50%;
transform: translateX(-50%);

子绝父相水平垂直居中操作：

left: 50%;
top: 50%;
transform: translate(-50%, -50%);

固定定位

C55 固定定位 （position: fixed）是一种将元素脱离文档流并始终相对于浏览器视口定位的布局技术。

position: fixed;

1. 元素脱离正常流，不占据空间，其他元素按原布局排列。
2. 始终相对于浏览器窗口（视口）定位，滚动页面时位置不变。
3. 可以通过top、bottom、left、 right 属性进行偏移。
4. 优先级：若同时设置top 和 bottom，仅top 生效；同理left 覆盖 right。

粘性定位

CSS 粘性定位 （position: sticky）是一种混合定位模式，结合了相对定位（relative）和固定定位（fixed）的特性。

position: sticky;

1. 元素在滚动到指定位置（如top:10px）前为相对定位，之后转为固定定位
2. 父容器的 overflow 需为 visible，否则粘性定位失效
3. 可以通过top、bottom、left、right 属性进行偏移
4. 须指定 top, right, bottom 或 left 四个其中之一，才可使粘性定位生效

层叠顺序

不同布局方式元素的层级关系：标准流 < 浮动 < 定位

不同定位之间的层级关系：

• 相对、绝对、固定默认层级相同
• 此时HTML中写在下面的元素层级更高，会覆盖上面的元素

z-index 属性用于控制元素在三维空间中的层叠顺序（即 Z 轴方向）。当多个元素在同一个平面（如同一行或列） 重叠时，z-index 决定哪个元素显示在最上层。

1. 值类型：整数（正数、负数、零）或 auto。数值越大，层级越高
2. 默认值：auto（等同于未设置，后出现的元素覆盖前者）。
3. 生效条件：仅对定位元素（position 值为 relative、absolute、fixed 或 sticky）有效。

z-index: 数值;