【前段基础入门之】=＞元素定位布局

导语：

CSS 元素定位，是目前 CSS 页面布局的一种主要方式。

相对定位

开启相对定位

• 给元素设置 position:relative 即可实现相对定位。
• 可以使用 left 、 right 、 top 、 bottom 四个属性调整位置。

相对定位的参考点

相对与自己开启定位前的原始位置，进行定位位置改变

相对定位的特点

1. 不会脱离文档流，元素位置的变化，只是视觉效果上的变化，不会对其他元素产生任何影响。
2. 定位元素的显示层级比普通元素高，无论什么定位，显示层级都是一样的。默认规则是：

• 定位的元素会盖在普通元素之上
• 都发生定位的两个元素，后开启定位的元素会盖在先开启定位的元素之上。

4. left 不能和 right 一起设置， top 和 bottom 不能一起设置。
5. 相对定位的元素，也能继续开启浮动，但不推荐这样做。
6. 相对行为的元素，也能通过 margin 调整位置，但不推荐这样做。

---

绝对定位

开启绝对定位

• 给元素设置 position: absolute 即可实现绝对定位。
• 可以使用 left 、 right 、 top 、 bottom 四个属性调整位置。

绝对定位的参考点

• 参考它的包含块
  

绝对定位的特点

1. 脱离文档流，会对后面的兄弟元素、父元素有影响。
2. left 不能和 right 一起设置， top 和 bottom 不能一起设置（特殊场景除外）。
3. 绝对定位、浮动不能同时设置，如果同时设置，浮动失效，以定位为主。
4. 绝对定位的元素，也能通过 margin 调整位置，但不推荐这样做。
5. 无论是什么元素（行内、行内块、块级）设置为绝对定位之后，都变成了定位元素。

---

固定定位

开启固定定位

• 给元素设置 position: fixed 即可实现固定定位。
• 可以使用 left 、 right 、 top 、 bottom 四个属性调整位置。

固定定位的参考点

• 参考它当前的浏览器 视口
  

固定位的特点

1. 脱离文档流，会对后面的兄弟元素、父元素有影响。
2. left 不能和 right 一起设置， top 和 bottom 不能一起设置。
3. 固定定位和浮动不能同时设置，如果同时设置，浮动失效，以固定定位为主。
4. 固定定位的元素，也能通过 margin 调整位置，但不推荐这样做。
5. 无论是什么元素（行内、行内块、块级）设置为固定定位之后，都变成了定位元素。

---

粘性定位

开启粘性定位

• 给元素设置 position:sticky 即可实现粘性定位。
• 可以使用 left 、 right 、 top 、 bottom 四个属性调整位置，不过最常用的是 top 值。

粘性定位的参考点

离它最近的一个拥有 “滚动机制” 的祖先元素，即便这个祖先不是最近的真实可滚动祖先

粘性定位的特点

• 不会脱离文档流，它是一种专门用于窗口滚动时的新的定位方式。
• 最常用的值是 top 值。
• 粘性定位和浮动可以同时设置，但 不推荐 这样做。
• 粘性定位的元素，也能通过 margin 调整位置，但 不推荐 这样做。

---

定位元素的层级

1. 定位元素的显示层级比普通元素高，无论什么定位，显示层级默认都是一样的。
2. 如果位置发生重叠，默认情况是：后面的元素，会显示覆盖在前面元素之上。
3. 可以通过 css 属性 z-index 调整元素的显示层级。
4. z-index 的属性值是数字，没有单位，值越大显示层级越高。
5. 只有定位的元素设置 z-index 才有效。
6. 如果 z-index 值大的元素，依然没有覆盖掉 z-index 值小的元素，那么请检查其包含块的层级,可能是父级元素的整体层级低了。

---

定位的特殊应用场景

场景一：让定位元素的宽铺满 包含块(父元素)

实现：前提是定位元素没有设置固定宽高度

1. 块宽度想与包含块一致，可以给定位元素同时设置 left，right 为 0 。
2. 高度想与包含块一致， 同时设置 top， bottom 为 0 。

释：向四周拉伸，铺满包含块

div {
    position: absolute;
    /* position: fixed; */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
1
2
3
4
5
6
7
8

场景二：让定位元素在包含块中居中;

前提：

实现：

position: absolute;
/* position: fixed; */
left:0;
right:0;
top:0;
bottom:0;
margin:auto;
1
2
3
4
5
6
7

---

🚵‍♂️ 博主座右铭：向阳而生，我还在路上！
——————————————————————————————
🚴博主想说：将持续性为社区输出自己的资源，同时也见证自己的进步！
——————————————————————————————
🤼‍♂️ 如果都看到这了，博主希望留下你的足迹！【📂收藏！👍点赞！✍️评论！】
——————————————————————————————