Search code examples
cssz-indexbackground-colortransparent

Stacking divs on top of each other

I have a very simple CSS question that I can't answer myself for some reason. I have a header that I'd like to add a black transparent background to it. Here is my HTML: 

<div id="directory">
 <div class="headerbg"></div>
 <h1>Rental Directory</h1>
</div>

The .headerbg has the black transparent background. But for some reason the H1 is layered underneath the black background. I tried z-indexing both the background or the h1 but I still can't get the H1 to stack on top of the background. Can someone please advise? Thank you.

Here is a link to the JS Fiddle: https://jsfiddle.net/x1L2jxnx/1/

Solution

  • z-index works for positioned absolute or relative elements, it's simple just add position relative and z-index for h1 tag,

    h1 { font-size: 50px; border-bottom: 15px solid #e8cd54; position:relative; z-index:1 }

    Updated jsfiddle