停止重叠第三分区

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>

问题是 row1 重叠第一个图像，但我只想注册按钮重叠图像，我确实尝试了 row1 CSS 中的"清除：两者;"，但没有任何反应。 我该怎么办？

Answer 1

如果我理解正确，问题在于使用位置：绝对。 简单地说，如果您在页面的一部分上使用它，则该部分与页面上的元素顺序不一致。它不会发生。所以你可以给它另一种显示。

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

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

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