定位绝对重新对齐所有div标记

Question

我使用Twitter Bootstrap来构建一个项目，在这个项目中，你可以选择图像的不同颜色，它们会发生变化。我已经设法实现了这一点，但我正在使用图像的多个部分来构建实际图像，这样我就可以实现变色方面。

我进行了研究，并完成了位置绝对，理论上，通过将图像堆叠在一起，可以达到我想要的效果。但是，要放置在下面的div标记会显示在图像的顶部。

我想知道是否有人能帮我？

这是我的代码：

<div class="container">
    <div class="col-md-6">
        <div class="row" align="center">
            <h1>Main Header</h1>
        </div>
        <div class="row" align="center">
            <img class="xbox" src="source">
            <img class="xbox" src="source">
            <img class="xbox" src="source">
            <img class="xbox" src="source">
            <img class="xbox" src="source">
            <img class="xbox" src="source">
        </div>
        <div class="row">Text here</div>
    </div>
</div>

然后我有了CSS，它是：

img.xbox {
position: absolute;
top: 50px;
left: 50px; }

我还在控制器的部分使用了z索引和一个类，并且图片显示为它应该显示的样子，只是div标记显示在图像上方而不是下方。

提前谢谢。

Answer 1

absolute位置的元素在DOM流中没有位置。因此，您必须将margin或padding添加到流中有位置的下一个元素中。

像这个

.text {
 margin-top : 250px; 
}

Answer 2

从DOM的正常流中取出position:absolute的As元素，因此您需要根据需要将图像包装在具有指定宽度和高度的<div>元素中。。。你可以试试这个代码。。。

.image-box {
  position: relative;
  height: 200px; // modify this as per your needs
  width: 200px; // modify this as per your needs
}

<div class="row" align="center">
  <div class="image-box">
    <img class="xbox" src="source">
    <img class="xbox" src="source">
    <img class="xbox" src="source">
    <img class="xbox" src="source">
    <img class="xbox" src="source">
    <img class="xbox" src="source">
  </div>
</div>