MegaTron MegaTron - 1 year ago 46
CSS Question

Is it possible to make an absolute positioned div appear above a fixed element?

What I have


  • A header that is fixed

  • Inside the header is a piece of text in the top right

  • When I click on the text an absolute positioned div appears underneath it with some 'options'

  • In the main content I also have a column on the right that's fixed with a button inside



The Issue


  • When clicking the text to display the absolute position div 'overlay', the button appears 'on top' of it.



Question


  • How do I ensure that when I click the text and the additional panel appears, that it appears on top of everything else?



Some quick code to demonstrate

If you click on the text in the top right, you'll see the issue.



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

Set your z-index of your header class lets say 1001 and then set z-index:1000 action class.

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

Hope this helps.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download