是否有可能使绝对定位的div出现在固定元素之上？

Question

我有什么

• 已修复的标头
• 标题内部是右上角的一段文字
• 当我点击文字时，会在其下方显示一个绝对定位的div，其中包含一些＆＃39;
选项＆＃39;
• 在主要内容中，我右侧还有一个栏目，里面有一个按钮

问题

• 点击文字以显示绝对位置div＆＃39; overlay＆＃39;时，按钮显示在顶部＆＃39;它。

问题

• 当我点击文字并显示其他面板时，如何确保它显示在其他所有内容之上？

一些快速演示代码

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

＆＃13;

＆＃13;

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

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

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*/
}

希望这有帮助。

Answer 2

＆＃13;

＆＃13;

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

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

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