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

Question

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

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

是否可以使 datepicker 组件在父级溢出时具有可见的溢出：scroll？

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

Answer 1

您可以使用position absolute

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

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

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

Is this possible to make the child dom element to have visible overflow when parent container element has overflow scroll?

html

javascript

css

overflow