CSS grid or flexbox: All elements same width and height, but overlapping

CSS grid or flexbox: All elements same width and height, but overlapping

mholt

New member
Local time
19:02
Joined
Oct 13, 2019
Messages
13

This one has me thrown for a loop.

Say I have a CSS container with 3 elements. The last element has content, but all 3 elements should have the same height according to the last element's size (and the width can be a hard-coded percentage or pixel value, so that's not any trouble I think).

Using display: flex or display: grid gets the auto-height thing working, but how do you make it so that they overlap each other? Suppose each element is 800px wide but I want them to be offset from the left 50px, 100px, and 150px.

So really, all I need is to slide them over to the left. Any idea how to do that?

 

Adam

Mr. Webwide
Administrator
Local time
02:02
Joined
Sep 24, 2019
Messages
1,248
Pronouns
he/him

Hmm... what is the end goal here? It should be possible but the best implementation will depend on what you're looking to do with them. A slider? Cover flow? Animate on hover?

 

Adam

Mr. Webwide
Administrator
Local time
02:02
Joined
Sep 24, 2019
Messages
1,248
Pronouns
he/him

Something like this?

 

mholt

New member
Local time
19:02
Joined
Oct 13, 2019
Messages
13

Nothing fancy. Literally just want them aligned like this:

In the end, I'll have a small stack of papers (I know how to do the rest though):

 

mholt

New member
Local time
19:02
Joined
Oct 13, 2019
Messages
13

Just saw your next reply! Yes, I think something similar. Let me play with that and see.

 

Adam

Mr. Webwide
Administrator
Local time
02:02
Joined
Sep 24, 2019
Messages
1,248
Pronouns
he/him

Just saw your next reply! Yes, I think something similar. Let me play with that and see.
Just cleaned it up a bit. Let me know how you get on! Looking at your graphic my first thought would be to use before and after psuedo elements instead but sounds like you got a plan. 😁

Let me know how you get on!

 

Ed Quijano

Member
Local time
18:02
Joined
Oct 19, 2019
Messages
1

With the CSS grid, you have many options. It's a matter of error and trial. Maybe you can try now with subgrid, nested grid, grid areas, and layering items. Firefox developer tools can help you to see how to accommodate your elements. One of the tricks that I learn how to deal with the CSS grid is to give background color to each element in order to manipulate the boxes. Hope this can help you.

 

mholt

New member
Local time
19:02
Joined
Oct 13, 2019
Messages
13

Ah, okay, so thanks to your pen I was able to figure something out.

I position each element as relative, then shift the second element left -100%, then the third one (the one with content) left -200%, (and so on if there were more).

I'll link to the final result when it's done! Kind of a neat effect. Not super elegant, but it works. Thanks for your help!!

 

mholt

New member
Local time
19:02
Joined
Oct 13, 2019
Messages
13

Okay, here's the result! caddyserver/dist

(Sorry, it's not hosted on a live server yet, just something we're using as a welcome page for Caddy distributions. Anyway, that's the HTML file!)

 
Top