css定位属性position

1. 静态定位 (static)

2. 相对定位 (relative)

3. 绝对定位 (absolute)

4. 固定定位 (fixed)

5. 粘性定位 (sticky)

定位的叠放顺序

CSS 定位属性用于控制元素的布局位置。通过定位，可以控制元素在页面上的确切位置，或者将其与其他元素相叠放等。CSS 提供了几种不同的定位机制：

 1. 静态定位 (static)

默认定位方式，没有特别指定定位方式的元素都会使用静态定位。

• 元素在文档流中出现的位置是正常的位置，不能通过 `top`、`right`、`bottom`、`left` 来改变位置。

2. 相对定位 (relative)

•  元素首先放置在静态定位的位置，然后根据 `top`、`right`、`bottom`、`left` 属性从其正常位置进行偏移。
•  其他元素仍然认为它在静态定位的位置，会留出空间。

.relative-div {
  position: relative;
  top: 10px;
  left: 20px;
}

3. 绝对定位 (absolute)

•  脱离了正常的文档流，不占据空间。
•  它的位置相对于最近的已添加定位属性（非 `static`）的祖先元素进行定位。如果没有这样的元素，就相对于初始包含块（通常是视口）。

.absolute-div {
  position: absolute;
  top: 50px;
  left: 100px;
}

 4. 固定定位 (fixed)

•  也是脱离了正常的文档流。
•  其位置相对于视口进行定位，即使页面滚动，元素也会留在固定的位置。

.fixed-div {
  position: fixed;
  bottom: 10px;
  right: 10px;
}

5. 粘性定位 (sticky)

•  是一种特殊类型的定位，它是基于用户的滚动位置来定位的。
•  元素在屏幕内的位置依赖于滚动位置，当元素到达某一个位置时会固定在那里。

.sticky-div {
  position: sticky;
  top: 0;
}

使用定位属性

使用以上定位方式时，通常会结合 `top`、`right`、`bottom`、`left` 属性来指定元素的确切位置。还需要考虑嵌套元素的定位影响，特别是绝对定位和固定定位的元素。

定位的叠放顺序

在使用定位布局时，可能会出现盒子重叠的情况，此时可以添加z-index属性来控制盒子的前后次序。

语法： z-index : 1;

数值可以是正整数、负整数或0，默认值是auto，数值越大盒子越靠上。