[英]Float one image over another with CSS
I am using bootstrap with some simple code. 我正在使用一些简单代码的bootstrap。 Inside the jumbotron div/container i have 2 images.
在jumbotron div /容器内,我有2张图像。 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.
快把我逼疯。
<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;
}
You need to use position: absolute
if 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属性,以根据自己的喜好定位。
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. 我现在无法测试它,但我认为这应该有效。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.