打破溢出：自动容器

Question

我在溢出内部有一个div容器：auto容器，但我希望这个容器能够突破溢出：auto conatiner。我需要这个日期选择器，它应该覆盖可滚动容器的边框，不应该被这个切割。目前，如果我想查看日历的最后一行，我必须滚动。这不是一个好的解决方案。

<div class="wrapper">
  <p>Content</p>
  <div class="breakout_anchor">
    <p>Anchor</p>
    <div class="breakout_element">
      <h1>I want to break out of the wrapper!</h1>
    </div>
  </div>
  <p>Content</p>
  <p>Content</p>
</div>

CSS：

.wrapper {
  background-color: green;
  position: relative;
  top: 50px;
  width: 80%;
  margin: 0 auto;
  height: 100px;
  overflow: auto;
}

Here is a simple plunker to show my problem.

没有javascript可以解决这个问题吗？

Answer 1

您可以使用position：fixed on breakout_element然后将其定位在正确的位置来执行此操作。

.breakout_anchor:hover .breakout_element {
    display: block;
    position: fixed;
    top: 130px;
    left: 90px;
}

见这里：http://plnkr.co/edit/Tzes2Bu6NzEZbSZR2uvp?p=preview