CSS 浮动、溢出和绝对位置答案

【问题标题】：CSS Floating, overflow and absolute positionCSS 浮动、溢出和绝对位置
【发布时间】：2013-02-21 16:05:56
【问题描述】：

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

主要内容有背景颜色，不得低于侧边栏。

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

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

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

编辑添加：我试过只使用'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;
}

【问题讨论】：

您能澄清一下您要达到的目标吗？下拉菜单必须绝对定位吗？
我正在努力使内容中的下拉菜单不会因溢出而被切断：隐藏。如果你检查小提琴，你会发现它的一半没有显示出来。
你需要
绝对定位吗？
@ericLemos 可能有一种浮动方式并使用边距。但它必须与位置不同的文本框相关（这是一个建议下拉菜单）
@EricLemos 不，那行不通。如果不是绝对定位，下拉菜单下方的内容会四处移动。