CSS Position(定位)

CSS Position(定位)

概述

CSS定位是网页布局中非常重要的一环，它决定了页面元素的位置和层叠顺序。在CSS中，定位可以分为几种类型，包括静态定位、相对定位、绝对定位和固定定位。每种定位方式都有其独特的应用场景和优势。

静态定位

静态定位是CSS定位的默认值，它会使元素根据其在文档流中的位置进行定位。静态定位的元素不会影响其他元素的位置。

代码示例

.static {
  position: static;
}

使用场景

静态定位适用于大多数元素，特别是当不需要对元素进行特殊定位时。

相对定位

相对定位会使元素相对于其正常位置进行定位。这意味着，即使元素发生了相对定位，其仍然占据其在文档流中的位置。

代码示例

.relative {
  position: relative;
}

使用场景

相对定位适用于以下场景：

• 当需要创建一个“悬浮框”时，将悬浮框设置为相对定位，然后将其他元素设置为绝对定位，使其相对于悬浮框定位。
• 当需要调整元素位置时，可以使用相对定位，通过移动元素的距离来调整其在文档流中的位置。

绝对定位

绝对定位会使元素相对于其最近的已定位的祖先元素进行定位。如果不存在已定位的祖先元素，则相对于初始包含块（通常是视口）定位。

代码示例

.absolute {
  position: absolute;
  left: 100px;