Question

我想把一个固定位置的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>

Answer 1

尝试使用 int array[][10][10][10]。

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

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

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

relative

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

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

这行得通吗？

CSS：位置固定到绝对位置

2 个答案: