Multiple layers with CSS/HTML?

[AlexTechFlow]

Hi Everyone,

What would be a good way of coding this website layout? Here is a screenshot (open in Photoshop)

Some of the backgrounds will be animated (embedded videos with Bootstrap classes), other items (like headings) will be animated with JavaScript.

Is z-index outdated?
What positioning method would be the best for this design?

The design looks like a fun coding challenge but I am confused about what method would be the best in this case. Should I go with div-inline-blocks, CSS grid, flexbox, relative-absolute positioning or a little bit of everything?

I want to make it responsive, of course, and keep my code as elegant as possible (considering that I will have many little visual details throughout the layout).

[SamA74]

@AlexTechFlow

What positioning method would be the best for this design?

I would probably use relative positioning to nudge the boxes up a bit to make the overlap, it’s a lot less dangerous than using absolute. You just need to leave enough padding-bottom on the previous element for the overlap to clear your content.

@AlexTechFlow

Is z-index outdated?

No, just misunderstood and abused. Since the later elements overlap on top of previous elements, you probably won’t need it, but don’t quote me.

@AlexTechFlow

embedded videos with Bootstrap classes

Would steer clear of Bootstrap with this. It does straight grids, but anything beyond that or a little different, it’s not the tool for the job.

@AlexTechFlow

I want to make it responsive, of course

Then you need to start by dreaming up how you want it to look on the small screen. Then make it happen.

[AlexTechFlow]

@SamA74

Then you need to start by dreaming up how you want it to look on the small screen. Then make it happen.

That sounds like a great starting point )) I’ll definitely make it a lot less complex to be on the safe side as a beginner.

@SamA74

No, just misunderstood and abused.

Just curious, where would you use z-index then? With more than 3 elements overlapping?

[SamA74]

@AlexTechFlow

Just curious, where would you use z-index then?

Short answer: When the stacking order is not what you want it to be.

The natural stacking order places child elements and subsequent elements on top of parent and previous elements.
So for example if you altered this design so the first elements overlapped the later ones (opposite to what you have) you would need to alter the z-index to make that happen.

[AlexTechFlow]

SamA74, that makes sense, thank you.

Also, I am wondering if relative positioning would be the best option for these blocks of text (About Us, History, Our Strategy):

I am thinking that Flexbox is the best option to position evenly spaced boxes here:

[SamA74]

@AlexTechFlow

I am thinking that Flexbox is the best option to position evenly spaced boxes here:

I was thinking along the lines of flexbox combined with relative positioning for the initial layout you posted…

[SamA74]

It looked like an interesting challenge, so I had a go at a simplified attempt at the first layout.
It uses a lot of flex, maybe grid could do it, but I’m not so familiar with that.
The css could be optimised a bit I think, as it was thrown together thinking on my feet. It may be better re-organised in mobile first, as most stuff in the query is just resetting to a standard “block on block” layout.
Not perfect but a good start.

Note just one z-index, of the pseudo element that “shadows” the footer nav, that exists to fill in the gap left by the relative position shift at the bottom of the page. Now I think of it, I could have used the pseudo to fake the overlap instead…

[AlexTechFlow]

SamA74, I’m saving that pen, thanks very much.

Learning a lot here.