在Bootstrap col中移动图像

Question

我试图在列表中叠加图像。其中一个图像将根据它在哪一行而改变。

到目前为止，我已经能够移动它们，看看我想要什么，但我遇到了两个问题：

1. 该行不包含图像（意味着它们是 与后续行重叠）
2. 当我调整窗口大小时，会改变所需的位置 （因图像大小改变而有意义）

这是我到目前为止所做的：

<div class="container">
    <div class="row">
        <div class="col-2">
            <div class="imageContainer"/>
              <img src="http://placehold.it/300x300" id="picture1" />
              <img src="http://placehold.it/200x200" id="picture2"/>
            </div>
        </div>
        <div class="col-8">
            Some text
        </div>
        <div class="col-2">
            Some more text
        </div>
    </div>
</div>

使用此样式表：

.imageContainer{
    position:relative;
    top:0px;
    left:0px;
}

.picture1{
    position:absolute;
    /*hat size=128px*/
    top:60px;
    z-index:3;
}
.picture2{

    position:absolute;
    top: 0px;
    left:20px;
    z-index:2;
}

现在，如果我在图像容器之后添加一个空白图像（宽度= 0），并且我给它预期的高度，我就能解决第一个问题。但是，如果调整窗口大小，则可能不再包含它们。

我想要达到的目的类似于拍摄一个人的照片和一副眼镜，并试图将眼镜放在人脸上（假设眼睛和脸部总是在同一个人面前）在照片中的位置）。