html - 是否可以使绝对定位的 div 出现在固定元素上方？

Question

我有什么

• 固定的 header
• header里面是右上角的一段文字
• 当我点击文本时，一个绝对定位的 div 会出现在它的下方，并带有一些“选项”
• 在主要内容中，我在右侧还有一列，其中固定有一个按钮

问题

• 单击文本以显示绝对位置 div“叠加”时，按钮出现在其“顶部”。

问题

• 如何确保当我点击文本并出现附加面板时，它会出现在其他所有面板之上？

一些用于演示的快速代码

如果您单击右上角的文本，您会看到问题。

$('.text').click(function(){
  
  $('.dropdown').toggle();
});

body {
  margin: 0;
  padding: 0;
}
.wrapper {
  width: 100%;
  float: left;
}
.header {
  width: 100%;
  height: 70px;
  position: fixed;
  background: #ebebeb;
}
.text {
  width: 200px;
  float: right;
  position: relative;
}
.text .dropdown {
  width: 100%;
  position: absolute;
  top: 65px;
  right: 0;
  background: #888;
  display: none;
}
.text .dropdown ul {
  width: 100%;
  float: left;
  margin: 0;
  padding: 0;
  list-style: none;
}
.content {
  width: 100%;
  height: 100%;
  float: left;
  margin-top: 80px;
}
.content .right-col {
  width: 30%;
  height: 200px;
  float: right;
  background: #ebebeb;
}
.content .actions {
  width: 100%;
  position: fixed;
  top: 80px;
  right: 10px;
}
.content .button {
  padding: 20px;
  float: right;
  background: green;
  color: white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="header">
    <div class="text">
      <span> Some text </span>
      <div class="dropdown">
        <ul> 
          <li> Text </li>
          <li> Text </li>
        </ul>
      </div>
    </div>
  </div>
  <div class="content">
    <div class="right-col">
      <div class="actions">
        <div class="button"> Button </div>
      </div>
    </div>
  </div>
</div>

Answer 1

设置标题类的 z-index 让我们说 1001，然后设置 z-index:1000 操作类。

.header {
   width: 100%;
   height: 70px;
   position: fixed;
   background: #ebebeb;
   z-index:1001;
}

.content .actions {
   width: 100%;
   position: fixed;
   top: 80px;
   right: 10px;
   z-index:1000; /* less then the header*/
}

希望这对您有所帮助。