打破溢出:自动容器

时间:2014-08-21 19:56:14

标签: css scroll overflow

我在溢出内部有一个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可以解决这个问题吗?

1 个答案:

答案 0 :(得分:0)

您可以使用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