Help with positioning

1

https://codepen.io/mhmdozer/pen/dEeoXv?editors=1100

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

2

Maybe set z index to -1?

3 
.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;
}
4

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

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

5

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

6

You want the images on top of .showcase right?

1 Like
7

10
101230Ă—406 527 KB

i want like this showcase top products below

8

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

9 
.showcase {
    background: url(https://images.pexels.com/photos/209151/pexels-photo-209151.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500);
    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
10

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