使用CSS将一个图片浮动到另一个图片上

Question

我正在使用一些简单代码的bootstrap。 在jumbotron div /容器内，我有2张图像。 一个左对齐。 一个右对齐。 如何在调整浏览器窗口大小时使右图像浮动在左图像上方/上方？ 快把我逼疯。

<div class="jumbotron">
<div class="container">

<div class="left-image">
<img src="left-image.png">
</div>

<div class="right-image">
<img src="right-image.png">
</div>

</div>
</div>

我认为像这样的简单CSS会做到吗？

.left-image {
float: left;
}
.right-image {
float: right;
z-index: 999;
}

Answer 1

如果希望图像重叠，则需要使用position: absolute

.left-image{
    position: absolute;
    left: 200px;
}
.right-image{
    position: absolute;
    right: 200px;
    z-index: 5;
}

编辑上方的left和right属性，以根据自己的喜好定位。

例

Answer 2

我认为在左浮动元素上设置一个负边距，并允许浮动右图像重叠。 例...

.left-image {
float: left;
margin-right: -200px;
}

我现在无法测试它，但我认为这应该有效。