位置绝对 div 不会出现在溢出-y 滚动内容的前面

Question

基本上，无论您在 div 中滚动到哪里，我都需要“模态”div 来填充

.container

div 的高度/宽度。出于某种原因，

.modal

div 一直出现在与

.inner-wrapper

div 的堆栈中，即使它是绝对位置。

为什么不填充父

.container

div？

如果可能的话，我想避免使用 JS。

我试过在所有涉及的 div 上使用

position

属性。我也尝试过使用 translate 属性。我在想

display: flex

也可能与此有关，但事实证明是错误的。我的猜测是这个问题与

overflow-y: scroll

有关。

$(".open-btn").click(function() {
  $(".modal").toggle();
});

.container {
  width: 300px;
  height: 300px;
  position: relative;
  border: 2px solid black;
  overflow-y: scroll;
}

.inner-wrapper {
  width: 100%;
  height: 800px;
  background: rgba(34, 34, 12, 0.3);
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-end;
  align-items: flex-end;
}

.open-btn {
  display: block;
  width: 100px;
  height: 30px;
}

.modal {
  display: none;
  width: 90%;
  height: 90%;
  background: green;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <div class="modal"></div>
  <div class="inner-wrapper">
    <button class="open-btn">Open</button>
  </div>
</div>

有关上下文，请参阅下面的 Codepen 链接： https://codepen.io/nss5161/pen/abaPZvy?editors=1100

Answer 1

在那种情况下它不会工作。您需要添加一个内部容器，因为

position: absolute

将定位到亲戚父母的滚动视口，因为那是实际父母的边界。

在容器内添加一个简单的包装器作为亲戚：

.container {
  width: 300px;
  height: 300px;
  border: 2px solid black;
  overflow-y: scroll;
}

.inner-container {
  position: relative;
}

.inner-wrapper {
  width: 100%;
  height: 800px;
  background: rgba(34, 34, 12, 0.3);
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-end;
  align-items: flex-end;
}

.open-btn {
  display: block;
  width: 100px;
  height: 30px;
}

.modal {
  background: green;
  position: absolute;
  inset: 0;
  z-index: -1;
}

<div class="container">
  <div class="inner-container">
    <div class="modal"></div>
    <div class="inner-wrapper">
      <button class="open-btn">Open</button>
    </div>
  </div>
</div>

Answer 2

是你期待的吗？

.container {
  width: 300px;
  height: 300px;
  position: relative;
  border: 2px solid black;
  overflow-y: scroll;
}

.inner-wrapper {
  width: 100%;
  height: 800px;
  background: rgba(34, 34, 12, 0.3);
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  align-items: end;
  flex-direction: column;
}

.open-btn {
  display: block;
  width: 100px;
  height: 30px;
  align-self: end;
}

.modal {
  width: 90%;
  aspect-ratio: 1/1;
  background: green;
  position: sticky;
  left: 15px;
  top: 15px;
}

<div class="container">
  <div class="modal"></div>
  <div class="inner-wrapper">
    <button class="open-btn">Open</button>
  </div>
</div>

Answer 3

我把

transform: translate(-50%, -50%);

改成了

transform: translate(-50%, 50%);

,

我希望这就是你所需要的。

$(".open-btn").click(function() {
  $(".modal").toggle();
});

.container {
  width: 300px;
  height: 300px;
  position: relative;
  border: 2px solid black;
  overflow-y: scroll;
}

.inner-wrapper {
  width: 100%;
  height: 800px;
  background: rgba(34, 34, 12, 0.3);
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-end;
  align-items: flex-end;
}

.open-btn {
  display: block;
  width: 100px;
  height: 30px;
}

.modal {
  display: block;
  width: 90%;
  height: 90%;
  background: green;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, 50%);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <div class="modal"></div>
  <div class="inner-wrapper">
    <button class="open-btn">Open</button>
  </div>
</div>