Ruby Ruby - 6 months ago 15
CSS Question

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/

Answer

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