full screen width child div with position absolute is hiding other elements - html

Question

I want to create a div that's wider than its parent, and i found many solutions.
Almost all of them say something that looks like this:
position:absolute;
left:0;
right:0;
(for example: How to expand child <div> with 100% of body width?)
This is indeed a solution, but there is only one little problem.
situation:
(jsfiddle)
<style>
.parent
{
width:70%;
padding: 1%;
}
.fullwidth
{
position:absolute;
left:0;
right:0;
}
</style>
<div class="parent">
<div>
<h1>
This is a normal div.
This text is visible
</h1>
</div>
<div class="fullwidth">
<h1>
This is a full width div.
</h1>
</div>
<div class="normal-div">
<h1>
This is a normal div
This text is hiding behind fullwidth div
</h1>
</div>
</div>
In this example, the second normal div is hiding behind the fullwidth div, because the fullwidth is absolute positioned.
So, how can you do this without having the divs hide behind the fullwidth div?

Answer 1

You need to make two changes to the "normal div":
Position relative (the default is static)
Set z-index below that of the absolute positioned div
And one change to the absolute div (set its z-index below the "normal" div).
http://jsfiddle.net/gx4p2red/3/
.fullwidth
{
position:absolute;
left:0;
right:0;
/*Testing only*/
background-color: green;
z-index: 0;
}
/*Testing only*/
.normal-div
{
background-color:red;
position: relative;
z-index: 1;
}