Question

我正在尝试将ul设置为高于其余内容，并且z索引不起作用。我根据需要添加了position属性来设置z索引，但仍然不起作用，我做错了什么？我怎么能解决这个问题？

ul {
  list-style: none;
}

.nb-drop-down {
  width: 400px;
  position: relative;
}
.nb-drop-down ul {
  width: 100%;
  border: 1px solid #eee;
  position: absolute;
  z-index: 100;
}
.nb-drop-down button, .nb-drop-down li {
  text-align: left;
  line-height: 50px;
  padding-left: 10px;
  cursor: pointer;
}
.nb-drop-down button {
  width: 100%;
  background: transparent;
  border: 1px solid #eee;
  position: relative;
}
.nb-drop-down button::after {
  content: '';
  position: absolute;
  border-style: solid;
  right: 15px;
  top: 50%;
  -webkit-transform: translateY(-50%);
  border-width: 10px 6.5px 0 6.5px;
  border-color: #e3e3e3 transparent transparent transparent;
}
.nb-drop-down button:focus {
  outline: none;
}
.nb-drop-down li:not(:last-child) {
  border-bottom: 1px solid #eee;
}

<div class="nb-drop-down">
  <button class="nb-main-item">Main Item</button>
  <ul class="nb-list">
    <li>Item One</li>
    <li>Item Two</li>
    <li>Item Three</li>
  </ul>
</div>

<h1>hello</h1>

Answer 1

UL高于H1（或其他所有内容），但具有透明背景。设置背景，例如：

.nb-drop-down ul {background: white;}

http://jsfiddle.net/5ojk1ojq/

Css z索引不适用于绝对位置和ul

1 个答案: