Question

我在平板电脑和移动视图中有3个无序列表。他们的heights设置为0，直到点击'column'类，然后他们使用jQuery转换为max-height。这很好，直到它们堆叠。我尝试过设置顶级li position:relative;z-index:3，中间li position:relative;z-index:2;，底部设置为li {{ 1}}。但是，它们没有按预期堆叠。是否有其他东西不会导致他们按预期行事？谢谢，任何信息都会有所帮助。

position:relative;z-index:1

CSS

 <div class="container banner">
  <div class="row">
    <div class="col-md-12">
      <div class="col-md-4 column top-layer">
        <h3 class="text-center location-banner">Tampa</h3><span class="fa fa-fw fa-chevron-down"></span>
        <div class="divider"></div>
        <div class="banner-dropdown">
          <ul>
            <li class="top">Top</li>
            <li class="top">Top</li>
            <li class="top">Top</li>
            <li class="top">Top</li>
            <li class="top">Top</li>
          </ul>
        </div>
      </div>
      <div class="col-md-4 column middle-layer">
        <h3 class="text-center location-banner">Jacksonville</h3><span class="fa fa-fw fa-chevron-down"></span>
        <div class="divider"></div>
        <div class="banner-dropdown">
          <ul>
            <li class="middle">Middle</li>
            <li class="middle">Middle</li>
          </ul>
        </div>
      </div>
      <div class="col-md-4 column bottom-layer">
        <h3 class="text-center location-banner">Orlando</h3><span class="fa fa-fw fa-chevron-down"></span>
        <div class="divider"></div>
        <div class="banner-dropdown">
          <ul>
            <li class="bottom">Bottom</li>
            <li class="bottom">Bottom</li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</div>

JS 单击列时，相应的ul高度将转换为205px。问题是视图是＆gt; 991px并且它们堆叠它们彼此不重叠。如果打开ul并打开中间ul，它将通过顶部div显示，而中间ul位于底部ul之下。不确定它是否与使用jquery添加的高度有关。如果需要更多信息，请告诉我。感谢。

.banner-dropdown {
  max-height: 0;
  width: 102%;
  transition: all .3s ease;
  margin: auto;
  background: rgb(155, 155, 155);
  position: relative;
  top: 10px;
  right: 15px;
  overflow: hidden;
}


.top {
  position: relative;
  z-index: 3;
}
.middle {
  position: relative;
  z-index: 2;
}
.bottom {
  position: relative;
  z-index: 1;
}
.column {
  background: rgba(8, 8, 8, 0.39);
  height: 48px;
  border: 4px solid #F8F8F8;
  cursor: pointer;
}

Answer 1

你想要这样的东西吗？ See this fiddle

我删除height的{{1}}：

.column

我还将.column { background: rgba(8, 8, 8, 0.39); border: 4px solid #F8F8F8; cursor: pointer; }的{{1}}更改为100％而不是102％。

如何堆叠重叠列表项

1 个答案: