Float one image over another with CSS

Question

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.

<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?

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

Solution 1

You need to use position: absolute if you want your images to overlap

.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.

Example

Solution 2

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.

Comments

[lowercase]

with absolute positioning, the left/right margins adhere to the browser window and not my container DIV. any way to make the left and right start at zero relative to the container DIV?

[Lloyd Banks]

@lowercase Yes, add position: relative to the parent DIV of .left-image / .right-image that you want to use as the container