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

【问题标题】：Is it possible to make an absolute positioned div appear above a fixed element?是否可以使绝对定位的 div 出现在固定元素上方？
【发布时间】：2018-01-24 18:23:00
【问题描述】：

我有什么

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

问题

单击文本以显示绝对位置 div 'overlay' 时，按钮会出现在它的“顶部”。

问题

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

一些快速演示代码

如果你点击右上角的文字，你会看到问题。

$('.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>

【问题讨论】：

听起来像z-index 问题

标签： html css

【解决方案1】：

$('.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 {
  z-index:100;
  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" style="z-index:199;">
    <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>

<div class="header" style="z-index:199;">

【讨论】：

【解决方案2】：

设置您的标头类的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*/
}

希望这会有所帮助。

【讨论】：

就是这样。在我的实际代码中，z-index 位于错误的 div 上。再过 9 分钟，我无法接受。但我会做的。谢谢纳西尔。