CSS定位

# CSS定位

CSS中定位通过position属性进行设置，position 属性有五个不同的位置值：

static（静态定位默认值）
relative（相对定位）
absolute（绝对定位）
fixed（固定定位）
sticky（粘性定位）

元素使用 top、bottom、left 和 right 进行偏移量的调整。但是，除非首先设置了 position 属性，否则这些属性将不起作用。根据不同的 position 值，它们的工作方式也不同。

# 静态定位（默认方式）

HTML 元素默认情况下的定位方式为 static（静态）。静态定位的元素不受 top、bottom、left 和 right 属性的影响。position: static; 的元素不会以任何特殊方式定位；它始终根据页面的正常流进行定位。

# 相对定位

使用 position: relative;进行设置
相对定位的元素是相对于其自身正常位置进行定位。
使用 top、right、bottom 和 left 调整其偏移量，不会脱离文档流，元素位置的变化只是视觉效果上的变化，不会对其他元素产生任何影响。

# 绝对定位

使用 position: absolute;进行设置
绝对定位是相对于最近的带有定位的祖先元素进行定位。如果绝对定位的元素没有带有定位的祖先元素，它将相对于文档主体（body）进行定位，并随页面滚动一起移动。
使用 top、right、bottom 和 left 调整其偏移量，脱离文档流，会对后面的兄弟元素、父元素有影响。

案例一：相对于带有定位的祖先元素进行定位

案例二：没有带定位的祖先元素时，相对于文档主体（body）进行定位

<!DOCTYPE html>
<html>
<head>
<style>
div.wrap {
  width: 400px;
  height: 200px;
  border: 3px solid red;
} 

div.absolute {
  position: absolute;
  top: 80px;
  right: 0;
  width: 200px;
  height: 100px;
  border: 3px solid red;
}
</style>
</head>
<body>
    <h1>position: absolute;</h1>
    <p>设置 position: absolute的元素会相对于最近的带有定位的祖先进行定位,如果绝对定位的元素没有带有定位的祖先元素，它将相对于文档主体（body）进行定位</p>

    <div class="wrap">
        这个 div 元素没有设置定位属性，则内部绝对定位元素相对于文档主体body进行定位
        <div class="absolute">这个 div 元素设置 position: absolute;</div>
    </div>
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

# 固定定位

使用 position: fixed;进行设置
固定定位是相对于视口进行定位，不随页面滚动一起移动。
使用 top、right、bottom 和 left 调整其偏移量，脱离文档流，会对后面的兄弟元素、父元素有影响。

案例

# 粘性定位

使用 position: sticky;进行设置
固定定位是相对于离他最近的带有滚动机制的祖先元素进行定位，先随页面滚动到设置好的位置之后，固定在其设定好的位置。
使用 top、right、bottom 和 left 调整其偏移量，不会脱离文档流。

案例

Last Updated: 2024/10/28, 16:28:52

← CSS浮动 CSS布局→