My current challenge involves coding a layout using CSS and Bootstrap 4:
https://i.sstatic.net/1uCwG.png
In this layout, DIV1 and DIV2 are integral parts of the background and need to remain fixed in their positions - DIV1 in the upper right corner, and DIV2 in the bottom right corner.
For DIV1, I utilized the following CSS:
#DIV1 {
position: relative;
}
#DIV1 img {
position: absolute;
top: 50px;
right: 25px;
width: 20%;
height: auto;
}
#DIV2 {
position: relative;
}
#DIV2 img {
position: fixed;
bottom:-150px;
right:-50px;
width: 40%;
height: auto;
}
However, my challenge lies with DIV3, which is not part of the background and needs to overlap DIV1 and DIV2 when necessary. DIV3 should be centered both vertically and horizontally, and be responsive to different screen sizes. I'm unsure of the best approach to tackle this - should I leverage the Bootstrap grid system? Would it be beneficial to place DIV1, DIV2, and DIV3 within a grid structure?