Stacking divs on top of each other

Question

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/

You're aware that z-index only works on positioned elements? — CBroe, May 20 '16 at 21:25
@CBroe, your comment is outdated: http://stackoverflow.com/a/35772825/3597276 — Michael Benjamin, May 21 '16 at 12:55

Andrew · Answer 1 · 2016-05-20T21:29:11.437

2

It is an issue with your absolute positioning.

h1 {
    font-size: 50px;
    border-bottom: 15px solid #e8cd54;
    width: 100%;
    position: absolute;
}

Replace the h1 with this code.

edited May 20 '16 at 21:29

answered May 20 '16 at 21:21

Andrew

56
6

works, but why did you add `width` and `top` values? They are completely unnecessary. – Aloso May 20 '16 at 21:24
For the yellow border to match your version, 100% the width. – Andrew May 20 '16 at 21:26
Why do you think the author wants the border to be that long? I think it looked better before. – Aloso May 20 '16 at 21:27
Thank you guys for your time. I totally forgot that z-index only works on positioned elements. – Ruby May 20 '16 at 21:34

score 1 · Accepted Answer · answered May 20 '16 at 21:23

1

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

answered May 20 '16 at 21:23

Okan Kocyigit

13,203
18
70
129

Thank you @ocanal! I have used position relative like you advised. I totally forgot that z-index only works on positioned elements. – Ruby May 20 '16 at 21:35
The list includes`fixed` as well; or to put it the other way around, z-index applies to any element that has a position different from the default `static`. – CBroe May 20 '16 at 21:37
As of CSS3, elements do not necessarily need to be positioned for `z-index` to work. http://stackoverflow.com/a/35772825/3597276 – Michael Benjamin May 21 '16 at 12:54

score 1 · Answer 3 · answered May 20 '16 at 21:23

z-index works fine for absolute positioned elements.

Or you may simply nest the h1 inside the headerbg.

#directory { padding: 10px 0 10px 20px; position: relative; height: 35vh; background-image: url('https://markshimazuphotography.files.wordpress.com/2013/05/san_diego_skyline_coronado_sunset.jpg'); background-repeat: no-repeat; color: #fff;}
.headerbg { background-color: rgba(0,0,0,0.5); width: 40em; height: 8em; position: absolute; top: 10px; left: 0; z-index:1}
h1 { position:absolute;left:10px;top:10px;z-index:2;font-size: 50px; border-bottom: 15px solid #e8cd54; }

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

Thank you @Ali Sheikhpour I totally forgot z-index only works on positioned elements. — Ruby, May 20 '16 at 21:35

score 0 · Answer 4 · answered May 20 '16 at 21:18

0

I believe you're placing the H1 tags outside out side the headerbg div. Try placing h1 inside the headerbg div like this:

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

answered May 20 '16 at 21:18

Youssef Hammoud

471
4
13

score 0 · Answer 5 · answered May 20 '16 at 21:47

Adding .headerbg div just for a background effect isn't the ideal way of coding the web.

I've removed the .headerbg div from the markup and added a css pseudo element to fix that issue. Like this.

#directory { padding: 10px 0 10px 20px; position: relative; height: 35vh; background-image: url('https://markshimazuphotography.files.wordpress.com/2013/05/san_diego_skyline_coronado_sunset.jpg'); background-repeat: no-repeat; color: #fff;}
#directory::after {content: ''; background-color: rgba(0,0,0,0.5); width: 40em; height: 8em; position: absolute; top: 10px; left: 0; }
h1 { position: absolute; font-size: 50px; border-bottom: 15px solid #e8cd54; z-index: 1}

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

I've also added position in the h1 element. Since the parent div is position: relative and the pseudo element is too I had to give the h1 so as I could set z-index: 1 to it as explained by @CBroe in your commments.

Stacking divs on top of each other

5 Answers5