I want to know how to set blocks/elements/backgrounds/to the right layer and make it show

HTML-CSS
1

I can’t make a white block in the center of the screen above a blue background and under a royal blue block.
what it should be simpleyfied
how it should be build up in layers:
1 blue
2 a white box
3 a lightblue box
4 small blocks
5 a snake

What I tried so far:
changing the positions doesn’t work I tried changing:
staticrelative
fixedabsolute
sticky`
this only works when u want to position relative under absolute…
I tried using the left/z-index which allowed me to change the position only to the left, right our down.
i tried using the background but this only works for the first layer.

When I place a text in the border it is visible. several text lines show it goes under the block but not under the blue background. So the position is okay.
It is connected with the csc otherwise it would’t show the white background.
Code:
https://codepen.io/maria-hoek/pen/VwwwwVM

2

Put the #block element inside the #border element and make border position relative. For the centering you can use different techniques.

Edit: pen example deleted

Here is an example. I used CSS Grid for centering border just because it’s easy. You can fork my pen, just let me know when you are done with it.

1 Like
3

while thank u kind sir :3 i am done.
i also looked into the issue myself some more since i want to use more then one small blue box i also will be using the z index