CODEWITHSUNDEEP
htmlcss
Robert J.
Robert J.

Reputation: 2701

correct z-index of the div element

I have the following HTML code:

<div class="caption_center">
    <h1 class="caption_header font-alpha">Robíme Váš svet pohodlnejší</h1>
    <p class="caption_regular font-alpha">Dovolte nám presvedčiť Vás o tom</p>
    <div class="caption_center_Background"></div>
</div>

with the following CSS:

.caption_center {
    position: absolute;
    height: auto;
    text-align: center;
    color: white;
    left: 20%;
    top: 50%;
    -moz-transform: translate(0,-50%);
    -ms-transform: translate(0,-50%);
    -o-transform: translate(0,-50%);
    -webkit-transform: translate(0,-50%);
    transform: translate(0,-50%);
    width: 60%;
    /*background: rgba(138, 138, 138, 0.55);*/
    padding-top:1em;
}

.caption_center_Background {
    position:absolute;
    width:100%;
    height:100%;
    top:0;
    background-color:black;
    opacity:1;
    z-index:0;
}

.caption_header  {
    z-index:999;
}

.caption_regular {
    z-index:998;
}

This results in the following:

enter image description here

What I am trying to achieve (in the end) is that this black box will have opacity of 0.5 and the text will be in front of this black box. This way, no matter what the background on my image is, user will still be able to see the text (that's why the semi-transparent black box).

Nonetheless, even though I have specified my z-index, I still cannot force the text to go in front of the black div box. I have also tried to make the box as first element (meaning it was before h1 and p elements), but with no change.

What am I doing wrong here?

P.S. I was trying to mimic the following fiddle.

Upvotes: 2

Views: 48

Answers (3)

Harry
Harry

Reputation: 89760

There are no problems with the z-index but you need to specify the position for it to work. Setting a value for position attribute is critical for the working because z-index has no effect on elements whose position is static (which is the default value for position attribute).

From CSS Tricks: (emphasis is mine)

The z-index property in CSS controls the vertical stacking order of elements that overlap. As in, which one appears as if it is physically closer to you. z-index only effects elements that have a position value other than static (the default).

.caption_center {
  position: absolute;
  height: auto;
  text-align: center;
  color: white;
  left: 20%;
  top: 50%;
  -moz-transform: translate(0, -50%);
  -ms-transform: translate(0, -50%);
  -o-transform: translate(0, -50%);
  -webkit-transform: translate(0, -50%);
  transform: translate(0, -50%);
  width: 60%;
  /*background: rgba(138, 138, 138, 0.55);*/
  padding-top: 1em;
}
.caption_center_Background {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  background-color: black;
  opacity: 0.5;
  z-index: 0;
}
.caption_header {
  position: relative;
  z-index: 999;
}
.caption_regular {
  position: relative;
  z-index: 998;
}
<div class="caption_center">
  <h1 class="caption_header font-alpha">Robíme Váš svet pohodlnejší</h1>
  <p class="caption_regular font-alpha">Dovolte nám presvedčiť Vás o tom</p>
  <div class="caption_center_Background"></div>
</div>

Another option would be to just set a negative z-index on .caption_center_Background. This way there would be no need to position (or) set high z-index to the other two elements that have the text.

.caption_center {
  position: absolute;
  height: auto;
  text-align: center;
  color: white;
  left: 20%;
  top: 50%;
  -moz-transform: translate(0, -50%);
  -ms-transform: translate(0, -50%);
  -o-transform: translate(0, -50%);
  -webkit-transform: translate(0, -50%);
  transform: translate(0, -50%);
  width: 60%;
  /*background: rgba(138, 138, 138, 0.55);*/
  padding-top: 1em;
}
.caption_center_Background {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  background-color: black;
  opacity: 0.5;
  z-index: -1;
}
<div class="caption_center">
  <h1 class="caption_header font-alpha">Robíme Váš svet pohodlnejší</h1>
  <p class="caption_regular font-alpha">Dovolte nám presvedčiť Vás o tom</p>
  <div class="caption_center_Background"></div>
</div>

Upvotes: 3

cнŝdk
cнŝdk

Reputation: 32145

You just need to put your text inside this background div.

This is an updated snippet:

.caption_center {
  position: absolute;
  height: auto;
  text-align: center;
  color: white;
  left: 20%;
  top: 50%;
  -moz-transform: translate(0, -50%);
  -ms-transform: translate(0, -50%);
  -o-transform: translate(0, -50%);
  -webkit-transform: translate(0, -50%);
  transform: translate(0, -50%);
  width: 60%;
  /*background: rgba(138, 138, 138, 0.55);*/
  padding-top: 1em;
}
.caption_center_Background {
  position: absolute;
  width: auto;
  height: auto;
  top: 0;
  background-color: black;
  opacity: 0.5;
  z-index: 0;
}
/*.caption_header {
  z-index: 999;
}
.caption_regular {
  z-index: 998;
}*/
<div class="caption_center">
  <div class="caption_center_Background">
    <h1 class="caption_header font-alpha">Robíme Váš svet pohodlnejší</h1>
    <p class="caption_regular font-alpha">Dovolte nám presvedčiť Vás o tom</p>
  </div>
</div>

And this way you won't have any position or z-index problems, and don't forget to give the background div, the needed style opacity : 0.5;.

This should do the trick.

Upvotes: 2

Mohammad Usman
Mohammad Usman

Reputation: 39322

Please try this...

.caption_header  {
    position: relative;
    z-index:999;
}

.caption_regular {
    position: relative;
    z-index:998;
}

Upvotes: 1

Related Questions