[CSS] 对定位的深入理解与应用

文章目录

• 相对定位
• • 如何设置相对定位
  • 参考点
  • 特点
• 相对定位
• • 如何设置绝对定位
  • 定位参考点
  • 特点
• 固定定位
• • **如何设置为固定定位**
  • 定位参考点
  • 特点
• 粘性定位
• • **如何设置为粘性定位**
  • **粘性定位的参考点**
• **定位层级**
• 特殊应用
• • 对于绝对定位和固定定位
  • • **让定位元素的宽充满包含块**
    • **让定位元素在包含块中居中**

CSS浮动布局学习

相对定位

如何设置相对定位

元素设置 position:relative ，实现相对定位
调整： left 、 right 、 top 、 bottom

参考点

相对于自己原来的位置进行定位

特点

1. 不会像浮动一样脱离文档流，只是视觉上的效果，不会对其他元素产生影响
2. 定位元素层级比层级元素高，所有定位层级相同：
   1. 定位的元素会覆盖在普通元素上。
   2. 都发生定位的两个元素，后写的元素会盖在先写的元素之上
3. left 不能和 right 一起设置， top 和bottom 不能一起设置
4. 相对定位的元素，也能继续浮动，但不推荐这样做
5. 相对行为的元素，也能通过 margin 调整位置，但不推荐这样做

注意：绝大多数情况下，相对定位，会与绝对定位配合使用。
**原因：**绝对定位的元素（即设置了 position: absolute; 的元素）相对于其最近的一个已定位的祖先元素进行定位。如果没有已定位的祖先元素，它将相对于浏览器窗口（即 body 元素）进行定位。
通过将父元素设置为相对定位（position: relative;），而将子元素设置为绝对定位（position: absolute;），可以使子元素的定位基于父元素，而不是整个页面。这使得布局更具可控性和可预测性。

相对定位

如何设置绝对定位

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

定位参考点

参考该定位元素的包含块

1. 对于没有脱离文档流的元素：包含块就是父元素；
2. 对于脱离文档流的元素：包含块是第一个拥有定位属性的祖先元素（如果所有祖先都
   没定位，那包含块就是整个页面）。

特点

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

定位元素：默认宽、高都被内容撑开，可以自由设置宽高

固定定位

如何设置为固定定位

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

定位参考点

• 参考定位元素的视口

**视口 ：对于 ****PC**浏览器来说，视口就是我们看网页的那扇“窗户”

特点

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

粘性定位

如何设置为粘性定位

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

粘性定位的参考点

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

可滚动祖先：

• 使用overflow属性用来设置滚动机制
  • overflow: visible;：内容不被剪裁，超出部分可见。
  • overflow: hidden;：内容被剪裁，超出部分不可见。
  • overflow: scroll;：内容被剪裁，显示滚动条。
  • overflow: auto;：根据内容是否超出自动显示滚动条。
• 粘性定位通常用于创建吸顶效果或侧边栏固定效果，当用户滚动页面时，元素会始终保持在视口内的特定位置。
• 滚动属性（特别是 overflow: auto;）可以在元素内容超出容器时提供滚动条，使用户能够滚动查看全部内容，与粘性定位结合使用时，可以在固定位置时仍然允许内容的查看和操作。

定位层级

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 。

让定位元素在包含块中居中

left:0;
right:0;
top:0;
bottom:0;
margin:auto;

注意：该定位的元素必须设置宽高
原因：

• 定位算法的依赖：
  • 在方案一中，使用margin: auto;来实现居中，如果元素没有指定宽度和高度，那么margin的自动计算就无法进行，从而无法正确居中。
• 视觉效果的实现：
  • 元素的宽高决定了它在包含块中的占据空间，设置了宽高后，可以确保元素在包含块中的位置是确定的，从而实现精确的居中效果。