使用CSS将一张图片浮动在另一张图片之上

Question

我正在使用一些简单的Bootstrap代码。在 jumbotron div/container 内部，我有两个图片。其中一个左对齐，另一个右对齐。如何让右边的图片在浏览器窗口缩放时浮动在左边的图片上方？这让我疯狂了。

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

- lowercase

---

z-index 只对定位元素起作用。为了让它生效，您需要将右侧图像 absolute 定位，否则当它们开始重叠时，其中一个图像只会将另一个图像推得更靠下。 - CBroe

请查看此链接：http://jsfiddle.net/u3vxxnoe/2/，这是您想要的吗？ - Raab

使用绝对定位后，左/右边距会依附于浏览器窗口而非我的容器DIV。有没有办法让左右边距相对于容器DIV从零开始？ - lowercase

Answer 1

如果您想让图片重叠，您需要使用 position: absolute

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

编辑上面的左右属性，以使定位符合您的喜好。

示例

- Lloyd Banks

---

使用绝对定位后，左/右边距会依附于浏览器窗口而非我的容器DIV。有没有办法让左右边距相对于容器DIV从零开始？ - lowercase

@lowercase 是的，在你想要用作容器的.left-image / .right-image的父DIV中添加position:relative。 - Lloyd Banks

Answer 2

我认为在左浮动元素上设置负的右外边距，以允许右浮动图像重叠。例如...

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

我现在无法测试，但我认为应该可以工作。

- Weston