1

这是（简化的）场景。我有一个包含另一个 div 的 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

4

1 回答 1

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/

“秘密”是财产overflow

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

绝对定位元素的包含块是最近的非静态 ascestor position。因此，当元素 withoverflow本身没有定位时，它不会裁剪绝对定位的后代。

于 2013-07-23T17:34:43.117 回答