CSS 为什么绝对定位在静态定位之上呈现

在本文中，我们将介绍为什么CSS中的绝对定位（position:absolute）比静态定位（position:static）优先呈现。

阅读更多：https://sotoolbox.com/tag/css target="_blank" rel="nofollow">CSS 教程

CSS定位属性概述

CSS中的定位属性决定了元素在页面中的位置。在CSS中有五种常见的定位属性：static、relative、absolute、fixed和sticky。

position:static是默认的定位属性，也就是元素处于正常的文档流中，不进行特殊定位。
position:relative相对定位是以元素自身为参考进行定位，不影响其他元素的位置。
position:absolute绝对定位是以最近的具有定位属性（非static）的父元素为参考进行定位，如果没有，则以页面根元素为基准进行定位。
position:fixed固定定位是相对于屏幕窗口进行定位，无论页面如何滚动，元素始终保持固定位置。
position:sticky粘性定位是在滚动过程中相对定位和固定定位的结合，元素在滚动到指定位置时变为固定定位，其他情况下为相对定位。

绝对定位的层叠顺序

在CSS中，元素按照层叠顺序进行绘制，越靠后的元素会覆盖在前面的元素之上。绝对定位的元素层叠顺序高于静态定位的元素，这是因为绝对定位的元素脱离了正常的文档流，可以在元素叠放顺序上进行特殊处理。

在绝对定位元素和静态定位元素重叠的情况下，绝对定位元素覆盖在静态定位元素之上。这意味着我们可以使用绝对定位元素在静态定位元素上方创建覆盖效果。通过设置绝对定位元素的定位属性和z-index属性，我们可以控制元素的层叠顺序。

示例代码如下：

<!DOCTYPE https://sotoolbox.com/tag/css target="_blank" rel="nofollow">html>
<https://sotoolbox.com/tag/css target="_blank" rel="nofollow">html>
<head>
<style>
.static-box {
  position: static;
  width: 200px;
  height: 200px;
  background-color: pink;
  border: 1px solid black;
}

.absolute-box {
  position: absolute;
  top: 50px;
  left: 50px;
  width: 100px;
  height: 100px;
  background-color: blue;
  border: 1px solid black;
  z-index: 1;
}
</style>
</head>
<body>

<div class="static-box"></div>
<div class="absolute-box"></div>

</body>
</html>

在上面的示例中，我们创建了一个静态定位元素（class=”static-box”）和一个绝对定位元素（class=”absolute-box”）。由于绝对定位的元素的层叠顺序高于静态定位的元素，所以蓝色的绝对定位元素会覆盖在粉色的静态定位元素之上。

控制层叠顺序 – z-index属性

除了绝对定位的元素会在静态定位的元素之上呈现之外，我们还可以使用z-index属性来控制元素的层叠顺序。z-index属性可以接受正负整数值，数值大的元素会在数值小的元素之上显示。

示例代码如下：

<!DOCTYPE html>
<html>
<head>
<style>
.static-box {
  position: static;
  width: 200px;
  height: 200px;
  background-color: pink;
  border: 1px solid black;
  z-index: 1;
}

.absolute-box {
  position: absolute;
  top: 50px;
  left: 50px;
  width: 100px;
  height: 100px;
  background-color: blue;
  border: 1px solid black;
  z-index: 2;
}
</style>
</head>
<body>

<div class="static-box"></div>
<div class="absolute-box"></div>

</body>
</html>

在上例中，我们将静态定位元素的z-index值设置为1，将绝对定位元素的z-index值设置为2。这样，绝对定位元素即使在层叠顺序的默认情况下也会覆盖在静态定位元素之上。