[FIXED] How do I add position/overlay these images and a div?

Issue

I'm building a website for one of my friends, and I'm having trouble placing a div to the left, and then images ontop of each others corners to the right. Here's a diagram to explain: Diagram

I don't really know how to position this all, while also keeping it responsive for mobile Any help appreciated!

Solution

Let's FIRST create the left and right parts and then create those three elements

You can use flex box to create two parts of your design Or you can use bootstrap if you don't want to code a lot

This example is Pure CSS

.parent{
     display: flex;
     flex-wrap: wrap;
}
.left,.right{
     width: 50%;
}
@media (max-width:768px){
    .left,.right{
         width: 100%;
    }
}

Or if you link bootstrap files then no extra CSS is necessary(former div will be the left one and latter will be the right one)

<div class="col-12 col-md-6"></div>
<div class="col-12 col-md-6"></div>

Now, For those three elements you should use CSS Positioning

I Can't explain all about positioning because it's a lot,, but We have 2 types of positions that are needed in your case

Position : absolute

Position : relative

If you position an element Relative and use properties like: top, bottom, right, left, z-index. The element will move according to its own default position

But if you position an element Absolute, the element will be extracted from his own father (no longer considered father's content) and if you use properties like top, bottom, left, right your element will be moved according to his first non-static father

It means CSS will look elements father, if father has a position property set to any value BUT static (which is default for position) CSS will move element according to that father, if father has static position, CSS will look up for element's grandfather and so on until a non-static parent can be found, if it does not found CSS will position element according to body element

Now, you have three items that you want them to be placed inside your right element, let's name them .item1 .item2 .item3 you can set their position to absolute AND set their father's(right's) position to relative

This way three items can be moved across their father using top, bottom, left, right and z-index

Here's the sample

.right{
     position: relative ;
}
.item1,.item2,.item3{
    position: absolute ;
}
.item1{
    left: 50%;
    top: 20px;
}
.item2{
    left: 70%;
    top: 120px;
}
.item3{
    left: 50%;
    top: 220px;
}

(numbers are just for example)

By default elements that are placed later in your html will appear on top of others in CSS Positions, you can change and modify this using z-index It's rules are simple, higher number means higher layer order...

Answered By - Mahdiar Mransouri

Answer Checked By - Marie Seifert (PHPFixing Admin)