Div with z-index:9 staying under another z-index of 1

Question

My <h4> and <a> are staying behind the background, even using a bigger z-index.

<section class="no-padding main-slider mobile-height wow fadeIn">
  <div class="swiper-full-screen swiper-container height-100 width-100 white-move">
    <div class="swiper-wrapper">

      <div class="swiper-slide equalize xs-equalize-auto">
        <div class="col-md-12 col-sm-12 col-xs-12" style="background-image:url('img/bg1.jpg'); background-size: cover">
          <div style="background-color: rgba(0, 0, 0, 0.5); position: absolute; height: 100%; width: 100%;"></div>
          <div class="display-table width-100 height-100">
            <div class="display-table-cell vertical-align-middle text-left padding-twelve-all xs-padding-five-all xs-padding-90px-top">
              <h4 class="text-swipe-title text-white margin-auto alt-font font-weight-600 letter-spacing-minus-1">TEXT</h4>
              <a href="#itin" style="z-index: 9" class="btn btn-small btn-rounded btn-secondary margin-50px-top xs-margin-20px-top">TEXT</a>
            </div>
          </div>
        </div>
      </div>

I'm trying to make both the <H4> and the <a> be above the background-color, using z-index.

score 0 · Answer 1 · answered Sep 19 '19 at 13:46

For your h4 tag, you're not setting any z-index at all. Also, for z-index to take effect, the element needs a position other than static (which is the default value). So by setting position: relative and the z-index for your h4 element, you can achieve what you want:

<div class="swiper-slide equalize xs-equalize-auto">
  <div class="col-md-12 col-sm-12 col-xs-12" style="background-image:url('img/bg1.jpg'); background-size: cover">
    <div style="background-color: rgba(0, 0, 0, 0.5); position: absolute; height: 100%; width: 100%;z-index:8"></div>
    <div class="display-table width-100 height-100">
      <div class="display-table-cell vertical-align-middle text-left padding-twelve-all xs-padding-five-all xs-padding-90px-top">
        <h4 class="text-swipe-title text-white margin-auto alt-font font-weight-600 letter-spacing-minus-1" style="position:relative; z-index: 9">TEXT</h4>
        <a href="#itin" style="position:relative; z-index: 9" class="btn btn-small btn-rounded btn-secondary margin-50px-top xs-margin-20px-top">TEXT</a>
      </div>
    </div>
  </div>
</div>

Otávio Barreto · Answer 2 · 2019-09-19T13:55:06.363

Z-index works with position:relative; elements.

Example:

<section class="no-padding main-slider mobile-height wow fadeIn">
  <div class="swiper-full-screen swiper-container height-100 width-100 white-move">
<div class="swiper-wrapper">
<div class="swiper-slide equalize xs-equalize-auto">
  <div class="col-md-12 col-sm-12 col-xs-12" style="background-image:url('img/bg1.jpg'); background-size: cover">
    <div style="background-color: rgba(0, 0, 0, 0.5); position: absolute; height: 100%; width: 100%;z-index:8"></div>
    <div class="display-table width-100 height-100">
      <div class="display-table-cell vertical-align-middle text-left padding-twelve-all xs-padding-five-all xs-padding-90px-top">
        <h4 class="text-swipe-title text-white margin-auto alt-font font-weight-600 letter-spacing-minus-1" style="position:relative; z-index: 9">TEXT</h4>
        <a href="#itin" style="position:relative; z-index: 9" class="btn btn-small btn-rounded btn-secondary margin-50px-top xs-margin-20px-top">TEXT</a>
      </div>
    </div>
  </div>
</div>
</section>

Div with z-index:9 staying under another z-index of 1

2 Answers2