Html 重新对齐所有div标签的绝对位置

我使用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>

我也在控制器的部分使用了z-index和一个类，并且图片看起来应该是这样的，它只是div标签出现在图片的上方而不是下方

---

提前感谢。

绝对位置的元素在DOM流中没有位置。因此，您必须将

边距

或

填充

添加到下一个在流中有位置的元素

---

处于绝对位置的元素在DOM流中没有位置。因此，您必须将

边距

或

填充

添加到下一个在流中有位置的元素

---

As元素with position:absolute是从DOM的正常流中提取出来的，因此您需要将图像包装在

元素中，并根据需要指定宽度和高度。。。你可以试试这个代码

.image框{
位置：相对位置；
高度：200px；//根据需要修改
宽度：200px；//根据需要修改
}

---

As element with position:absolute从DOM的正常流中取出，因此您需要根据需要将图像包装在具有指定宽度和高度的

元素中。。。你可以试试这个代码

.image框{
位置：相对位置；
高度：200px；//根据需要修改
宽度：200px；//根据需要修改
}

能否请您创建JSFIDLE或Codepen，以便我们能更好地帮助您。能否请您创建JSFIDLE或Codepen，以便我们能更好地帮助您。谢谢您，我不知道它这么简单，出于某种原因完全忘记了。我尝试了

top:50%

，但没有成功，所以我想我只是放弃了它。非常感谢。是的，一旦您知道固定和绝对位置在DOM流中没有位置，就更容易理解如何定位元素：）不客气！谢谢你，我没有意识到它这么简单，出于某种原因，我完全忘记了。我尝试了

top:50%

，但没有成功，所以我想我只是放弃了它。非常感谢。是的，一旦您知道固定和绝对位置在DOM流中没有位置，就更容易理解如何定位元素：）不客气！

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

.text {
 margin-top : 250px; 
}