html - 使子 div 大于固定位置父 div

Question

请看下面的 fiddle : https://jsfiddle.net/a9ravkf5/3/

#navbar{
  position: fixed;
  top: 0;
  left: 0;
  height:40px;
  background-color: grey;
  width: 100%;
}
#sidebar{
  position: fixed;
  top: 40px;
  left: 0;
  z-index: 0;
  height:100%;
  width: 200px;
  background-color: black;
}

#dropdown{
  position: absolute;
  top: 0px;
  left 0px;
  width: 500px;
  color: #fff;
  z-index: 10;
  padding-left: 10px;
  padding-top: 10px;
  padding-bottom: 10px;
  background-color: blue;
  
}

#content{
  position: absolute;
  top: 40px;
  left: 200px;
  right: 0px;
  min-height: 300px;
  background-color: green;
}

<div id="navbar">
</div>

<div id="sidebar">
  <div id="dropdown">
  This is a very long sentance that should be visible in its entirety.
  </div>
</div>

<div id="content">
</div>

我想让蓝色元素比固定位置父元素更大(更宽)。这将是一个用于在侧边栏中选择选项的下拉菜单，我希望它能够扩展内部内容而不是换行到多行(更大的高度)。

执行此操作的最佳解决方案是什么？

Answer 1

您的子 div 大于包含的固定 div。 您看不到全部内容的原因是您的 #content div 显示在固定 #sidebar div 的前面。

尝试添加 z-index到 #sidebar 和 #content div，如下所示:

#sidebar {
  position: fixed;
  top: 40px;
  left: 0;
  z-index: 0;
  height: 100%;
  width: 200px;
  background-color: black;
  z-index: 2; // Here we give the sidebar a larger z-index resulting in it being showed on top of the content.
}

#content {
  position: absolute;
  top: 40px;
  left: 200px;
  right: 0px;
  min-height: 300px;
  background-color: green;
  z-index: 1; // Here we give the content a lower z-index resulting in it being showed beneath the sidebar.
}

#navbar {
  position: fixed;
  top: 0;
  left: 0;
  height: 40px;
  background-color: grey;
  width: 100%;
}

#dropdown {
  position: absolute;
  top: 0px;
  left 0px;
  width: 500px;
  color: #fff;
  z-index: 10;
  padding-left: 10px;
  padding-top: 10px;
  padding-bottom: 10px;
  background-color: blue;
}

<div id="navbar"></div>
<div id="sidebar">
  <div id="dropdown">
    This is a very long sentance that should be visible in its entirety.
  </div>
</div>
<div id="content"></div>