我在overflow:auto容器中有一个div容器,但是我希望该容器脱离overflow:auto容器。我需要一个日期选择器,该日期选择器应覆盖可滚动容器的边框,并且不应以此为切入点。例如,如果要查看日历的最后一行,当前必须滚动。这不是一个好的解决方案。

<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,有可能解决此问题吗?

最佳答案

您可以使用breakout_element上的position:fixed进行定位,然后将其放置在正确的位置。

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


看到这里:http://plnkr.co/edit/Tzes2Bu6NzEZbSZR2uvp?p=preview

10-07 19:57
查看更多