How to achieve this sticking out image layout without using negative margins? - html

Question

This is the layout image:
As you can see in the image, the images of the phones are sticking out of the blue container.
I have tried several things, such as:
I tried to use a grid with 5 rows where a <div> tag expanded all the rows and was set to have its background as the phone images. Then I set the blue background box to use only the rows form 2-4.
This somehow did the trick, but when the browser window was resized the image started to shrink and be positioned in a funky way.
As a newcomer to CSS I want to avoid negative margins because I have read they are "evil".
Is there any way to accomplish this in a clean/non-hacky way?

Answer 1

You can use the transform property to move the images where they need to be.
You'll need to build your layout as usual, but without the images being raised/lowered outside their default position.
Once you've done that, you can use transform: translateY(-100px) to raise or lower the images into their target position.
A quick example of this can be shown using <div> tags:
/* Setup some basic layouts to mimic the layout required */
.container {
padding-top: 100px;
padding-bottom: 100px;
}
.banner {
height: 200px;
background: blue;
display: flex;
justify-content: center;
align-items: center;
}
.image-1 {
height: 200px;
width: 200px;
background: red;
transform: translateY(-50px); /* move the image up */
}
.image-2 {
height: 200px;
width: 200px;
background: green;
transform: translateY(50px); /* move the image down */
}
.example-filler {
}
<div class="container">
<div class="banner">
<div class="image-1"></div>
<div class="image-2"></div>
<div class="example-filler">Lorem ipsum</div>
</div>
</div>

Answer 2

If you don't wan't to use negative margins (which are fine in this situation). You can try to give these styles to your image.
img {
position: relative;
top: -100px;
}
You can learn more about the "position" property here.
It is very important for beginners to understand how it works.