twitter-bootstrap 使用 CSS 将一张图片浮动到另一张图片上
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25208736/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Float one image over another with CSS
提问by lowercase
I am using bootstrap with some simple code. Inside the jumbotron div/container i have 2 images. One aligned left. One aligned right. How do i allow the right image to float over/above the left one on resize of the browser window? Driving me crazy.
我正在使用带有一些简单代码的引导程序。在 jumbotron div/container 里面我有 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>
I thought simple css like this would do it?
我认为像这样简单的 css 可以做到吗？
.left-image {
float: left;
}
.right-image {
float: right;
z-index: 999;
}
回答by Lloyd Banks
You need to use position: absoluteif you want your images to overlap
position: absolute如果您希望图像重叠，则需要使用
.left-image{
position: absolute;
left: 200px;
}
.right-image{
position: absolute;
right: 200px;
z-index: 5;
}
Edit the left and right properties above to get the positioning to your liking.
编辑上面的 left 和 right 属性以获得您喜欢的定位。
回答by Weston
I think setting a negative margin right on the left floating element with the amount you want the floating right image to be allowed to overlap. Example...
我认为在左侧浮动元素上设置负边距，您希望允许右侧浮动图像重叠。例子...
.left-image {
float: left;
margin-right: -200px;
}
I can't test it right now but I think that should work.
我现在无法测试它，但我认为这应该可行。
