CSS：位置固定在绝对位置

debugcn 发表于 Dev

贾科莫·卡萨迪（Giacomo Casadei）

我想将固定位置div放入绝对位置div。我的代码不起作用，如何.box固定div ？

.container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  height: 90%;
  border: 1px solid black;
  overflow-y: auto;
}

.box {
  position: fixed;
  height: 50px;
  width: 90%;
  top: 0;
  left: 50%;
  transform: translate(-50%);
  border: 1px solid black;
}

<div class="container" align="center">
  <div class="box">This div in fixed position does not stay fixed</div>
  <div style="margin-top: 55px">Text</div>
  <div>Text</div>
  <div>Text</div>
  <div>Text</div>
  <div>Text</div>
  <div>Text</div>
  <div>Text</div>
  <div>Text</div>
  <div>Text</div>
  <div>Text</div>
  <div>Text</div>
  <div>Text</div>
  <div>Text</div>
  <div>Text</div>
  <div>Text</div>
  <div>Text</div>
  <div>Text</div>
  <div>Text</div>
</div>

凤凰城

尝试使用position: sticky。

粘性元素根据滚动位置在relative和之间切换fixed。定位relative直到在视口中遇到给定的偏移位置-然后将其“粘贴”在适当的位置（如position：fixed）。

我更改了您的代码，请看下面的内容。

注意： Internet Explorer，Edge 15和更早版本不支持粘性定位。Safari需要-webkit-前缀。您还必须指定顶部，右侧，底部或左侧至少之一，以便粘性定位起作用。

.container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  height: 90%;
  border: 1px solid black;
  overflow-y: auto;
}

.box {
  position: sticky;
  height: 50px;
  width: 100%;
  top: 0;
  border: 1px solid black;
}

<div class="container" align="center">
  <div class="box">This div in fixed position does not stay fixed</div>
  <div style="margin-top: 55px">Text</div>
  <div>Text</div>
  <div>Text</div>
  <div>Text</div>
  <div>Text</div>
  <div>Text</div>
  <div>Text</div>
  <div>Text</div>
  <div>Text</div>
  <div>Text</div>
  <div>Text</div>
  <div>Text</div>
  <div>Text</div>
  <div>Text</div>
  <div>Text</div>
  <div>Text</div>
  <div>Text</div>
  <div>Text</div>
</div>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。