HTML(20)——定位

定位

作用：灵活的改变盒子在网页中的位置

实现：

1. 定位模式：position
2. 边偏移：设置盒子的位置

• left
• right
• top
• bottom

相对定位

position：relative

改变位置的参照物是自己原来的位置，并且不脱标占位，标签显示模式特点不变

绝对定位

position：absolute

使用场景：子级绝对定位，父级相对定位

•  脱标不占位
• 参照物：先找最近的已经定位的祖先元素，如果所有祖先元素都没有定位，参照浏览器可视区改变位置
• 显示模式特点：行内块，即宽高生效

定位居中

步骤：

1. 绝对定位
2. 水平、垂直边偏移为50%
3. 子级向左、上移动自身尺寸的一半。transform:translate(-50%,-50%)

固定定位

position：fixed;

脱标，不随内容滚动而滚动，显示模式行内块。

堆叠层级

默认效果:按照标签书写顺序，后来者居上

作用：设置定位元素的层级列表，改变定位元素的显示模式

z-index:数字   数字越大显示顺序越靠上。