Adding DIV on top of image div css

This question already has an answer here:

Trying to add the text on top of the image. I tried adding relative and absolute positioning to the divs and z-index. Anyone know why its not working as intended?

<div class="container banner bg-white">
      <div class="row">
        <div class="col-lg-12 banner-image" style="position: relative;z-index:-1;">
          <img src="http://7-themes.com/data_images/collection/3/4446673-blue-wallpapers.png" class="img-responsive">
        </div>
        <div class="banner-box-outer" style="position: absolute;">
          <h1 class="text-dark-blue">
            Some text
            <br> tittle
          </h1>
          <div class="banner-list">
            <ul class="list-group">
              <li class="list-group-item">
                <img src="https://" alt="Tick" class="banner-list-tick"> 1 point
              </li>
              <li class="list-group-item" style="display:inline;">
                <img src="https://" alt="Tick" class="banner-list-tick"> 1 point
              </li>
              <li class="list-group-item">
                <img src="https://" alt="Tick" class="banner-list-tick">1 point
                <br><span style="font-size:12px; ">   &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;som e text</span>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>

Answers 1

  • You are looking to add position: relative to the parent of the element you are trying to position absolutely. This basically tells the absolute element to be positioned relative to that parent. Css:

    .container .row{
      position: relative;
    }
    .banner-box-outer{
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
    }
    

Related Articles