Kevin Powell - Community•3mo ago

Overlapping containers Dilemma..

👋 Hi everyone, I have encountered a bit of a dilemma when creating a section containing overlapping container blocks… In my project I have created the overlap using “translateY: 15vw;” however I encounter extra spacing at the bottom of the section.. (seemingly because the displaced space where the second section is translated from doesn’t seem to go away) Would appreciate hearing any thought you guys may have on navigating this issue.. This is desired outcome & this is also how my current project looks… My version… https://free.olithompson.dev/?post_type=bricks_template&p=3217&bricks_preview=1739016009

4 Replies

Chris Bolson•3mo ago

That link isn't working. Rather than using translateY you could use a negative top margin, this will pull the whole element up and not create that gap. There are probably other/better ways but this would be a quick fix.

Oli_TOP•3mo ago

Ingenious!! I will give that a try 👍

Alex•3mo ago

For overlapping elements if usually go with a grid solution, since that always feels cleaner if it needs to be overridden at different sizes.

#container { 
display: grid;
grid-template-rows: 1fr 15vw 1fr;
&  img {grid-row: 1 / 3}:
&  form {grid-row: 2 / 4};
}

#container { 
display: grid;
grid-template-rows: 1fr 15vw 1fr;
&  img {grid-row: 1 / 3}:
&  form {grid-row: 2 / 4};
}

I'd also avoid using vw units for vertical spacing, since on an ultra wide monitor the form will be far higher up, which I doubt is a desirable result.

ἔρως•3mo ago

i wouldn't use viewport units for this, at all im on a phone that's 10:16, or something then, i go to my 1080p pc display that is 16:9 that 15vw will be tiny on my phone and super large on my pc

Gaming

Programming

Overlapping containers Dilemma..

Did you find this page helpful?