CSS position属性absolute relative等五个值的解释

下面是关于CSS position 属性及其五个值的详细讲解：

1. 什么是 position 属性

CSS position 属性指定一个元素在文档中的位置方式。这个属性可以控制元素的位置方式，并且会影响元素的显示效果。

2. position 属性的五个值

CSS position 属性有五种取值，分别为 static（默认值）、relative、absolute、fixed、sticky。

• static：默认值，即元素在文档中的位置方式没有特别限制，元素在正常流中进行排列。
• relative：元素会相对于自己在文档中的正常位置移动，但元素仍保持在文档中的正常流中。
• absolute：元素会完全从文档中移除，并相对于文档的包含块进行定位。
• fixed：元素会相对于浏览器窗口的视口进行定位，并在滚动页面时保持不变。
• sticky：元素会根据文档流布局进行正常定位，并随着滚动而滚动，当元素到达容器的顶部或底部时，会固定在该位置上。

下面分别对这五个取值进行详细讲解。

2.1 static

static 是 position 的默认值，它意味着元素在文档中的位置方式没有特别限制，元素在正常流中进行排列。

<div class="box">这是一个静态元素</div>

.box {
  border: 1px solid black;
  padding: 10px;
}

上面的代码中 .box 元素将以静态位置进行布局，即没有特别的限制，它将按照文档流中的顺序进行排列。

2.2 relative

relative 值会相对于元素在文档中的正常位置进行移动，但元素仍保持在文档中的正常流中。

<div class="box">这是一个相对定位元素</div>

.box {
  border: 1px solid black;
  padding: 10px;
  position: relative;
  left: 50px;
  top: 50px;
}

上面的代码中 .box 元素使用了 position: relative，同时使用 left 和 top 属性移动了元素的位置，元素相对于原来的位置向右移动了 50px，向下移动了 50px。

2.3 absolute

absolute 值会使元素完全从文档中移除，并相对于文档的包含块进行定位。

<div class="relative">
  <div class="absolute">这是一个绝对定位元素</div>
</div>

.relative {
  border: 1px solid red;
  height: 200px;
  margin-bottom: 10px;
  position: relative;
}

.absolute {
  border: 1px solid blue;
  bottom: 0;
  left: 0;
  height: 50px;
  position: absolute;
  width: 100%;
}

上面的代码中，.relative 这个容器使用了 position: relative，它的 height 属性指定了容器的高度，并为内部的 .absolute 元素提供了位置参照。.absolute 使用了 position: absolute，width属性设置为100%，使其宽度和父元素相同，随着父元素宽度的变化而变化。bottom 属性被设置为 0，用于将元素定位到容器的底部，left 属性被设置为 0，将元素与容器的左侧对齐。

2.4 fixed

fixed 值会使元素相对于浏览器窗口的视口进行定位，并在滚动页面时保持不变。

<div class="fixed">这是一个固定定位元素</div>

.fixed {
  background-color: #eee;
  bottom: 0;
  padding: 10px;
  position: fixed;
  right: 0;
}

上面的代码中，.fixed 元素将总是出现在视口右下角，即使页面滚动也是如此。它的 bottom 值设置为 0，right 值设置为 0，使其相对于视口右下角定位。

2.5 sticky

sticky 值会使元素根据文档流布局进行正常定位，并随着滚动而滚动，当元素到达容器的顶部或底部时，会固定在该位置上。

<div class="sticky">
  <div class="item">这是一个卡顿效果元素</div>
  <div class="item">这是一个卡顿效果元素</div>
  <div class="item">这是一个卡顿效果元素</div>
</div>

.sticky {
  border: 1px solid red;
  height: 300px;
  overflow: auto;
  position: sticky;
  top: 10px;
}

.item {
  border: 1px solid blue;
  height: 100px;
  margin-bottom: 10px;
}

上面的代码中，.sticky 元素和内部的 .item 元素都使用了 position: sticky。.sticky 的 height 属性指定了容器的高度，并使用了 overflow: auto 以创建一个滚动条。.sticky 的 top 值被设置为 10px，表示从视口顶部往下滚动 10px 后，该元素变为固定位置。.item 元素使用了 margin-bottom，使它们之间留出空白。

总结

position 属性是控制元素位置的重要属性，不同的取值会有不同的作用和影响。这里我们介绍了 static、relative、absolute、fixed 和 sticky 这五个值，并且结合了示例代码进行讲解，希望对大家有所帮助。