how to display div in front of <header> element - css

Question

How can I display a div that is outside the <header> element in front of the header i.e. with a higher z-index. I've tried to use the z-index property but it doesn't seem to work. My particular example can be seen here: http://www.spabc.com/drupal/ I want to display the logo on the right side in front of the header bar.

Answer 1

Add position: relative; to #logo.
#logo {position: relative;}

Answer 2

Adding
position: relative;
to #logo will work. As for z-index, it does not work on default positioned elements. The standard position property is static.
z-index only works on positioned elements (position:absolute,
position:relative, or position:fixed).
Read more about z-index here.
Default element stacking
I read this on MDN, figured I'd go through it first before posting it here.
When no z-index is present in the element's properties, elements are stacked in the following order, 3 being the one the furthest in the back:
Background and borders of the root element
Descendant blocks in the normal flow, in order of appearance (in HTML)
Descendant positioned elements, in order of appearance (in HTML)
There are still rules that go with this order.
If the position value of multiple overlapping objects is the same, the order is given by their position in the HTML document.
If a position value is not set, it defaults to the static value. static elements will always fall behind elements that have a
position value.
div {
font: 12px Arial;
}
span.bold {
font-weight: bold;
}
#normdiv {
height: 70px;
border: 1px dashed #999966;
background-color: #ffffcc;
margin: 0px 50px 0px 50px;
text-align: center;
}
#reldiv1 {
opacity: 0.7;
height: 100px;
position: relative;
top: 30px;
border: 1px dashed #669966;
background-color: #ccffcc;
margin: 0px 50px 0px 50px;
text-align: center;
}
#reldiv2 {
opacity: 0.7;
height: 100px;
position: relative;
top: 15px;
left: 20px;
border: 1px dashed #669966;
background-color: #ccffcc;
margin: 0px 50px 0px 50px;
text-align: center;
}
#absdiv1 {
opacity: 0.7;
position: absolute;
width: 150px;
height: 350px;
top: 10px;
left: 10px;
border: 1px dashed #990000;
background-color: #ffdddd;
text-align: center;
}
#absdiv2 {
opacity: 0.7;
position: absolute;
width: 150px;
height: 350px;
top: 10px;
right: 10px;
border: 1px dashed #990000;
background-color: #ffdddd;
text-align: center;
}
<div id="absdiv1">
<br /><span class="bold">DIV #1</span>
<br />position: absolute;
</div>
<div id="reldiv1">
<br /><span class="bold">DIV #2</span>
<br />position: relative;
</div>
<div id="reldiv2">
<br /><span class="bold">DIV #3</span>
<br />position: relative;
</div>
<div id="absdiv2">
<br /><span class="bold">DIV #4</span>
<br />position: absolute;
</div>
<div id="normdiv">
<br /><span class="bold">DIV #5</span>
<br />no positioning
</div>
Stacking without z-index on floating objects
For floating blocks the stacking order is a bit different. Floating blocks are placed between non-positioned blocks and positioned blocks:
Background and borders of the root element
Descendant blocks in the normal flow, in order of appearance (in
HTML)
Floating blocks
Inline descendants in the normal flow
Descendant positioned elements, in order of appearance (in HTML)
div {
font: 12px Arial;
}
span.bold {
font-weight: bold;
}
#absdiv1 {
opacity: 0.7;
position: absolute;
width: 150px;
height: 200px;
top: 10px;
right: 140px;
border: 1px dashed #990000;
background-color: #ffdddd;
text-align: center;
}
#normdiv {
/* opacity: 0.7; */
height: 100px;
border: 1px dashed #999966;
background-color: #ffffcc;
margin: 0px 10px 0px 10px;
text-align: left;
}
#flodiv1 {
opacity: 0.7;
margin: 0px 10px 0px 20px;
float: left;
width: 150px;
height: 200px;
border: 1px dashed #009900;
background-color: #ccffcc;
text-align: center;
}
#flodiv2 {
opacity: 0.7;
margin: 0px 20px 0px 10px;
float: right;
width: 150px;
height: 200px;
border: 1px dashed #009900;
background-color: #ccffcc;
text-align: center;
}
#absdiv2 {
opacity: 0.7;
position: absolute;
width: 150px;
height: 100px;
top: 130px;
left: 100px;
border: 1px dashed #990000;
background-color: #ffdddd;
text-align: center;
}
<div id="absdiv1">
<br /><span class="bold">DIV #1</span>
<br />position: absolute;
</div>
<div id="flodiv1">
<br /><span class="bold">DIV #2</span>
<br />float: left;
</div>
<div id="flodiv2">
<br /><span class="bold">DIV #3</span>
<br />float: right;
</div>
<br />
<div id="normdiv">
<br /><span class="bold">DIV #4</span>
<br />no positioning
</div>
<div id="absdiv2">
<br /><span class="bold">DIV #5</span>
<br />position: absolute;
</div>