CSS positioning and z-index
I bang my head about this for a while, and even though I come to it and read it, I get to the end of my zipline.
I have a fixed position header that my content scrolls below. In the header, I have a menu icon that opens a menu in an overlay that spans the entire page.
I want the menu icon to sit above the overlay, the caption to sit above the title, and the title to sit above everything else.
I wrote a script to isolate the problem and hopefully find a solution.
<div class="overlay"></div>
<header>
<span>☰</span>
</header>
-
html, body {
height: 100%;
}
header {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 50px;
background: rgba(255,0,0,.7);
}
header span {
float: left;
margin-left: 20px;
margin-top: 12px;
cursor: pointer;
z-index: 1000;
}
.overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,255,255,.3);
z-index: 900;
}
If this is not possible, I am open to suggestions for a different approach.
source to share
Move .overlay
to <header>
and set to a menu icon position
other than static
.
<header>
<div class="overlay"></div>
<span>☰</span>
</header>
header span {
float: left;
margin-left: 20px;
margin-top: 12px;
cursor: pointer;
z-index: 1000;
position: relative; /* <-- added declaration */
}
Explanation
Since header
positioned absolutely - fixed
- it sets a new stacking context, therefore, moving .overlay
in header
, .overlay
and invested span
will have the same structure of the context.
Also, z-index
only applicable to non-positioned elements static
, so you need to specify an a element position
other than static
.
source to share