html - 使用 CSS 将一张图片 float 到另一张图片上

Question

我正在使用带有一些简单代码的 Bootstrap 。在超大屏幕 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 属性以获得您喜欢的位置。

Example