i have to positioning an image between the bottom of two div, one inside another like:
The code for this example is:
<div style="background:blue;width:500px;height:150px;overflow:hidden;">
<div style="background:red;width:500px;height:100px;margin-top:20px;">
//DOES IMAGE GOES HERE?
</div>
</div>
I know that with position absolute i could positioning the image there.. but i don't like that kind of positioning.. is there another way? Thanks!!!
You can use BG image. image with position absolute (the image will overlay div 1,2).
One approach would be to set up each section with the desired ratio, and wrap both sections in a container that has "relative" positioning. The image element would then be placed with "absolute" positioning where the top position is 70% to line up with the boundary of the two sections. Save this answer.
Add CSS. Add a relative div placed in the flow of the page. Set the background image as relative so as the div knows how big it must be. Set the overlay as absolute, which will be relative to the upper-left edge of the first image.
With CSS properties, you can easily put two <div> next to each other in HTML. Use the CSS property float to achieve this. With that, add height:100px and set margin.
Hey now used to this
.parent{
background:blue;
width:500px;
height:150px;
overflow:hidden;
}
.child{
background:red;
width:500px;
height:100px;
margin-top:20px;
position:relative;
}
.child img{
position:absolute;
bottom:-25px;
right:6%;
width:200px;
height:50px;
}
.parent{
background:blue;
width:500px;
height:150px;
overflow:hidden;
}
.child{
background:red;
width:500px;
height:100px;
margin-top:20px;
position:relative;
}
.child img{
position:absolute;
bottom:-25px;
right:6%;
width:200px;
height:50px;
}
<div class="parent">
<div class="child">
<img src="http://fakeimg.pl/250x100/">
</div>
</div>
Full css sample
.blue {
background: blue;
width: 500px;
height: 150px;
overflow: hidden;
}
.red {
background: red;
width: 500px;
height: 100px;
margin-top: 20px;
position: relative;
}
.image {
position: absolute;
bottom: -10px;
/* half of image height */
right: 10px;
/* right space */
}
.image img {
display: block;
width: 100px;
height: 20px;
background: green;
}
<div class="blue">
<div class="red">
<div class="image">
<img src="" alt="" />
</div>
</div>
</div>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With