我有一个左侧 float 的侧边栏，带有一个绝对定位并延伸到主要内容之上的下拉菜单。
主要内容的背景颜色不得位于侧边栏下方。
一些内容还包含一个绝对定位的下拉列表，其内容超出了其父边界。
内容以 block 为单位。 block 应该完全 float 到侧边栏的左侧，或者一旦侧边栏被清除，它们就应该占据整个水平宽度。
通常，除了内容下拉外，所有这些规则都可以满足。这将通过对内容元素应用“溢出:隐藏”来完成，因为这将包含背景。但是，在这种情况下，内容区域中的下拉菜单会导致问题，因为它扩展到其父垂直边界之外并导致它被隐藏。 (我在演示中使用了“溢出:滚动”而不是“隐藏”来突出问题)。
编辑添加:我试过只使用“overflow-x: hidden”和 overflow-y: visible，但由于某些原因它不起作用。
或者这里是 html 和 css:
<body>
<div id="sidebar">
<div id="sidebar_dropdown">
sidebar_dropdown
</div>
</div>
<div class="content">
some content
</div>
<div id="content_2">
something more content with an absolutly positioned drop down.
<div id="dropdown">
dropdown content
<br/>
dropdown content
<br/>
dropdown content
<br/>
dropdown content
<br/>
dropdown content
<br/>
dropdown content
<br/>
</div>
<br/>
<br/>
<br/>
some content hidden by dropdown.
</div>
<div class="content">
some content
</div>
<div class="content">
some content
</div>
<div class="content">
some content
</div>
</body>
CSS:
#sidebar {
float: right;
margin:0 1em;
background-color: #8888ff;
height: 10em;
width: 5em;
position:relative;
}
#sidebar_dropdown {
position: absolute;
right: 0;
top: 1em;
background-color: #888888;
}
.content {
margin: 1em 0;
background-color: #ff8888;
overflow: hidden;
}
#content_2 {
margin: 1em 0;
background-color: #88ff88;
position: relative;
overflow: scroll;
}
#dropdown {
background-color: #88ffff;
position: absolute;
}
最佳答案
如果你想在绝对元素上使用 overflow:hidden - 在你的情况下 - 你将不得不用另一个绝对元素包裹它们来反射(reflect)它的父元素(宽度和高度必须相同)。
HTML
<div id="hideOverflow">
<div id="sidebar_dropdown">
sidebar_dropdown
</div>
</div>
CSS
#hideOverflow { width: 5em; height: 10em; position:absolute; overflow:hidden; }
关于html - CSS float 、溢出和绝对位置，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14986694/