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-index和一个类，图片显示应该是，它只是div标签出现在图像上方而不是下方。

提前谢谢。

Answer 1

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

Like this

.text {
 margin-top : 250px; 
}

Answer 2

作为具有position：absolute的元素从DOM的正常流程中取出，因此您需要根据需要将图像包装在具有指定宽度和高度的<div>元素中...您可以尝试此代码...

＆＃13;

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

＆＃13;

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

＆＃13;

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

2 个答案: