在图像div css

Question

尝试在图像上添加文本。我尝试将相对和绝对定位添加到div和z-index。任何人都知道为什么它没有按预期工作？

＆＃13;

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您希望将position: relative添加到您要绝对定位的元素的父级。这基本上告诉绝对元素相对于父母定位。 的CSS：

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