Adding DIV on top of image div css [duplicate]

Question

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>

Just declare position: relative to the containing parent element .container.banner, then add top: 0; to .banner-box-outer (which will now offset its position to its nearest/closest relative parent). — UncaughtTypeError
– UncaughtTypeError, Commented Oct 30, 2017 at 0:08

vicbyte · Accepted Answer · 2017-10-30 00:32:49Z

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%;
}

answered Oct 30, 2017 at 0:32

vicbyte

3,7901 gold badge14 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Adding DIV on top of image div css [duplicate]

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related