CSS 绝对定位和固定定位的一起使用

在本文中，我们将介绍CSS中绝对定位和固定定位的概念，并且讨论如何在同一个元素上同时应用这两种定位方式。绝对定位和固定定位是CSS中常用的定位方式，它们可以使元素脱离正常的文档流，并且可以精确地定位在页面的指定位置。

阅读更多：CSS 教程

绝对定位和固定定位的基本概念

绝对定位

绝对定位是指一个元素完全脱离正常文档流，根据所设置的定位父元素来进行定位。通过设置元素的position属性为absolute，可以使元素脱离文档流并根据其最近的具有定位属性（不包括static）的父元素来进行相对定位。

<div class="container">
  <div class="box"></div>
</div>

.container {
  position: relative;
}
.box {
  position: absolute;
  top: 20px;
  left: 20px;
}

在上面的例子中，.container 是一个相对定位的父元素，.box 是一个绝对定位的子元素。通过设置 .container 的 position 为 relative，我们创建了一个相对定位的上下文。然后，通过设置 .box 的 position 为 absolute，我们使它脱离了正常文档流，并且根据 .container 元素进行定位。在这个例子中，.box 元素被定位到距离 .container 左上角 20 像素的位置。

固定定位

固定定位是指一个元素相对于浏览器窗口进行定位，无论页面滚动与否，元素始终保持在固定的位置上。通过设置元素的 position 属性为 fixed，可以使元素固定在页面上的指定位置。

<div class="box"></div>

.box {
  position: fixed;
  top: 20px;
  left: 20px;
}

在上面的例子中，.box 元素被设置为固定定位，它的位置不受页面滚动的影响。.box 元素被定位到距离浏览器窗口左上角 20 像素的位置。

绝对定位和固定定位的同时应用

有时候，我们可能需要同时应用绝对定位和固定定位到同一个元素上。这种情况下，我们需要设置元素的 position 属性为 absolute 并且添加 position 属性为 fixed 的父元素。这样，元素将脱离文档流，并且相对于这个固定定位的父元素进行定位。

<div class="fixed-container">
  <div class="box"></div>
</div>

.fixed-container {
  position: fixed;
  top: 0;
  left: 0;
}

.box {
  position: absolute;
  top: 20px;
  left: 20px;
}

在上面的例子中，.fixed-container 是一个固定定位的父元素，它的位置固定在浏览器窗口的左上方。然后，我们在 .fixed-container 中创建了一个绝对定位的 .box 元素。.box 元素被定位到距离 .fixed-container 左上角 20 像素的位置。

当我们滚动页面时，.fixed-container 会保持在浏览器窗口的固定位置，而 .box 元素则会相对于 .fixed-container 进行定位。

总结

在本文中，我们介绍了CSS中绝对定位和固定定位的概念，并且讨论了如何在同一个元素上同时应用这两种定位方式。绝对定位和固定定位是CSS中常用的定位方式，它们可以使元素脱离正常的文档流，并且可以精确地定位在页面的指定位置。同时应用绝对定位和固定定位可以给我们更多的布局选择，特别是在需要固定定位的元素内部再进行定位时。希望本文对你理解CSS中绝对定位和固定定位的应用有所帮助。