html - 停止重叠第三个 div

Question

我是 css 的新手，我写了下面的代码:

.topcenter {

	margin-right: auto;
	margin-left: auto;
	position: relative;
}
.back {
	width: 100%;
	height: auto;
	position: absolute;
	
}
.green {
	background-color: #9AC149;
	}

    <div class="back"><img src="https://www.smashingmagazine.com/wp-content/uploads/2015/06/10-dithering-opt.jpg" width="500" height="200" alt=""/></div>
  <div class="topcenter"><a href="register.html" target="_self"><img src="http://pngimg.com/uploads/buttons/buttons_PNG44.png?i=1" alt="" width="10%" title="register"/></a></div>
  <div class="green">
    <div class="row row1">
      <div class="col-md-6">
        <div><p>
        i dont want it be overlap
        </p>
          <button type="button" class="btn btn-default">Content for New Div Tag Goes Here</button>
        </div>
      </div>
      <div class="col-md-6">
        <div><img src="images/book.png" width="413" height="461" alt=""/></div>
      </div>
    </div>
  </div>

问题是第 1 行与第一个图像重叠，但我只想注册按钮重叠图像，我试过“clear:both;”在 row1 css 但什么也没发生。我应该怎么办 ？

Answer 1

如果我理解正确的话，问题出在使用 position: absolute 上。简而言之，如果您在页面的一部分上使用它，则该部分页面上的元素顺序不正确。它没有发生。所以你可以给它其他类型的显示。

.back {
  width: 100%;
  height: auto;
  position: relative;
}

如果您想将按钮放在图像上，您应该将 position: absolute 添加到您的 .topcenter 类中。您可以使用 top,right,bottom,left 移动它。

你也可以尝试用你的文件顺序来解决这个问题。