html - 停止重叠第三格

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

问题是row1重叠第一张图片，但我只想注册按钮重叠图片，我确实尝试过“ clear：both;”；在第1行CSS中，但是什么也没发生。我该怎么办 ？

最佳答案

如果我理解正确，那么问题出在使用position：absolute。
简单地说，如果您在页面的一部分上使用它，则该部分与页面上元素的顺序不符。它不会发生。因此，您可以给它其他显示方式。

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

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

您也可以尝试按文件顺序进行计算。

关于html - 停止重叠第三格，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/45485563/