是否有可能讓絕對定位的div出現在固定元素的上方？

Question

我有什麼

• 是固定
• 頭內的頭是在右上角一塊文本
• 當我點擊文本絕對定位的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*/ 
} 

希望這會有所幫助。

Answer 2

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