Question

我有一个左侧浮动侧边栏，下拉菜单绝对定位并延伸到主要内容上。

主要内容的背景颜色不得放在侧边栏下。

某些内容还包含一个绝对定位的下拉列表，其内容超出其父级边界。

内容以块为单位。这些块应该完全浮动到侧杆的左侧，或者一旦侧杆被清除，它们就会占据整个水平宽度。

通常，除了内容中的下拉菜单外，所有这些规则都可以得到满足。这可以通过将'overflow：hidden'应用于内容元素来完成，因为这将包含背景。但是，在这种情况下，内容区域中的下拉列表会导致问题，因为它会超出其父垂直边界并导致其被隐藏。（我在演示中使用了'overflow：scroll'而不是'hidden'来突出显示问题。）

编辑添加：我尝试过只使用'overflow-x：hidden'和overflow-y：visible'但由于某种原因它无效。

Here is a fiddle

另外这里是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;
}

Answer 1

如果你想使用overflow：隐藏在绝对元素上 - 在你的情况下 - ，你必须用另一个反映它的父元素的绝对元素包装它们（宽度和高度必须相同）。

HTML

<div id="hideOverflow">
    <div id="sidebar_dropdown">
        sidebar_dropdown
    </div>
</div>

CSS

#hideOverflow { width: 5em; height: 10em; position:absolute; overflow:hidden; }

Answer 2

我通过使用js插入内容下拉列表解决了这个问题（我已经这样做了，因此它不是问题，因为它是通过ajax填充的。）

不是相对于它所属的文本框插入它，而是插入到主体的顶部，然后从文本框中计算它的位置。因此，渲染树的位置高于应用了“溢出隐藏”的内容平面。

CSS浮动，溢出和绝对位置

2 个答案: