Ist es möglich, ein absolut positioniertes div über einem festen Element erscheinen zu lassen?

Question

Was ich habe

• Ein Header,
• Innerhalb des Kopf befestigt ist, ist ein Stück Text in der rechten oberen
• Wenn ich auf den Text klicken absolute positioniert div darunter erscheint mit einige ‚Optionen‘
• im Hauptinhalt ich habe auch eine Spalte auf der rechten Seite, die mit einem Knopf im

fixiert ist Die Ausgabe

• Wenn Sie den Text klicken Sie auf die absolute Position div ‚Overlay‘ angezeigt werden, erscheint die Schaltfläche ‚auf‘ davon.

Frage

• Wie kann ich sicherstellen, dass, wenn ich den Text klicken und das zusätzliche Feld angezeigt wird, dass es oben auf alles andere erscheint?

Einige schnelle Code

Wenn Sie auf den Text in der rechten oberen klicken, um zu demonstrieren, werden Sie das Problem sehen.

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

Legen Sie Ihre z-index Ihrer Header-Klasse 1001 können sagen, und stellen Sie dann z-index:1000 Action-Klasse.

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

Hoffe, das hilft.

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