Question

这是（简化）方案。我有一个包含另一个div的div。外部div具有固定的尺寸，具有滚动条和相对定位。内部div大于并且相对于外部div定位。我希望内部div完全可见，“浮动”在外部div之上。

我很欣赏这听起来很人为，因为以这种方式限制外部div的大小是没有意义的。它是。但是在实际应用程序中，外部div中还有其他内容需要使用滚动条控制。

如何单独使用css？请注意，内部div必须相对于外部div定位，因此使用position：fixed不是一个选项。

标记：

  <div id="container">
    <div id="popup">Popup Text</div>
  </div>

的CSS：

#container{ 
  overflow: scroll;
  height:50px;
  width:50px;
  position:relative;
}
#popup {
  position:absolute;
  top:20px;
  border:1px solid #000;
  height:100px;
  width:100px;
}

这是Plunker

Answer 1

您可以添加额外的包装器并将position: relative和overflow设置为不同的包装器： HTML

  <div id="base">
      <div id="container">
        <div id="popup">Popup Text</div>
      </div>
  </div>

CSS

#base {
  height:50px;
  width:50px;
  position:relative;
}
#container{ 
  overflow: scroll;
  height:100%;
  width:100%;
}
#popup {
  position:absolute;
  top:20px;
  border:1px solid #000;
  height:100px;
  width:100px;
}

小提琴：http://jsfiddle.net/UGftq/

＆＃34;秘密＆＃34;那是the overflow property

...影响除了any之外的所有元素内容的剪辑后代元素（及其各自的内容和后代）其包含块是视口或元素的祖先。

绝对定位元素的containing block是最近的具有非静态position的提升者。因此，当overflow的元素本身没有定位时，它不会剪切绝对定位的后代。

如何从一个容器中“浮动”一个绝对定位的元素div

1 个答案: