该设计该如何编码？ img不高于div

Question

我有一个问题。 我要设计这个。

这是代码。

   <section class="location">
    <div class="wrapper">
      <div class="textbox">
        <p class="tit">address</p>
        <p class="sub_text">address</p>
      </div>
    </div>
  </section>

这是CSS

section.location {
  width: 100%;
  height: 270px;
  background-color: #608144;
  color: #fff;
  overflow: hidden;
  position: relative;
}

section.location .wrapper {
  width: 1200px;
  height: 270px;
  margin: auto;
}

section.location .wrapper:after {
  content: "";
  display: inline-block;
  background-image: url("http://via.placeholder.com/193x239.jpg");
  width: 193px;
  height: 239px;
  position: relative;
  top: -80%;
  right: 7%;
}

我尝试使用：after和绝对位置，但是看起来像这样。

img不高于div。该设计该如何编码？

Answer 1

z-index: 1;或99，如果1不起作用。

由于所有元素都是分层的，因此z-index确定可以优先显示的层。 z-index的值越高，使它模糊的事物越少。

带有z-index: 1的元素将使带有z-index: 0的元素模糊。

Answer 2

使z-index值高于其他使用的元素。

section.location {
  width: 100%;
  height: 270px;
  background-color: #608144;
  color: #fff;
  overflow: hidden;
  position: relative;
  z-index: 0;// added 
}

section.location .wrapper {
  width: 1200px;
  height: 270px;
  margin: auto;
  z-index: 1;// added 
}

section.location .wrapper:after {
  content: "";
  display: inline-block;
  background-image: url("http://via.placeholder.com/193x239.jpg");
  width: 193px;
  height: 239px;
  position: relative;
  top: -80%;
  right: 7%;
  z-index: 2;// added 
}