CSS：位置固定到绝对位置[重复]答案

【问题标题】：CSS: postion fixed into position absolute [duplicate]CSS：位置固定到绝对位置[重复]
【发布时间】：2021-04-27 23:16:06
【问题描述】：

我想把一个固定位置的 div 放到一个绝对位置的 div 中。我的代码不起作用，如何修复 div .box？

.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>

【问题讨论】：

标签： html css

【解决方案1】：

尝试使用position: sticky。

粘性元素在relative 和fixed 之间切换，具体取决于滚动位置。它定位在relative，直到在视口中遇到给定的偏移位置 - 然后它“粘”在适当的位置（如位置：固定）。

我修改了你的代码，看看下面。

注意： Internet Explorer、Edge 15 及更早版本不支持粘性定位。 Safari 需要 -webkit- 前缀。您还必须至少指定 top、right、bottom 或 left 之一才能使粘性定位起作用。

.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>

【讨论】：

【解决方案2】：

.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: 90%;
  top: 0;
  border: 1px solid black;
  background-color: white;
}

<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>

这行得通吗？

【讨论】：