javascript - 当父容器元素具有溢出滚动时，这是否可以使子 dom 元素具有可见的溢出？

Question

我有一个模态组件，它应该具有可滚动的内容。

在那个模态组件上，我有一个日期选择器输入，它应该弹出一个日期选择器，并且即使它在容器组件块之外，这个弹出窗口也应该是可见的。

当父级溢出时，这是否可以使 datepicker 组件具有可见的溢出：滚动？

我曾尝试使用 position: absolute 但这对我的情况没有帮助

标签： javascripthtmlcssoverflow

Answer 1

您可以使用position absolute

但是在定位时您必须保持小心，因为position: absolute在这种情况下没有定位到父元素。您可以使用另一个box1容器positionrelative

.box1 {
  width: 180px;
  height: 200px;
  border: 1px solid black;
  background-color: red;
  overflow: scroll;
}

.box2 {
  width: 200px;
  height: 100px;
  border: 1px solid black;
  background-color: blue;
  position: absolute;
}

<div class="box1">qwertyuiopasdfghjklzxcvbnm
  <div class="box2"></div>
</div>