Help with positioning

hi everyone. I have a problem with absolute positioning. my background class (.showcase) has a absolute positioning but after showcase class I have a product class which has 4 image content. but it is doesnt see beacuse it is under showcase class. it is must be below the showcase class how can I fix this problem

Maybe set z index to -1?

.products {
    position: relative; <---- add this
    z-index: 100;  <--- add this
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 15px;
    margin-right: 10px;
    margin-left: 10px;

Since showcase will likely always be the bottom element., @newbiewebdeveloper is more accurate.

You would add z-index: -1 to the .showcase selector

thanks for helping but if I set it it is only overlapping

You want the images on top of .showcase right?

1 Like

i want like this showcase top products below

Then there’s no reason to absolute position the .showcase {}

.showcase {
    background: url(;
    height: 600px;
    background-size: cover;
    margin: 0;
    margin-bottom: 20px;
    padding: 0;
    position: absolute;  <--- remove this
    right: 0; <--- remove this
    left: 0; <---- remove this

And you’ll have what you’re describing…

1 Like

I think it is my mistake :slight_smile: thank you for help