Z-index problem in setting the background
Hello everyone!
I am working on a small assignment based on HTML/CSS which involves coding a information card. Here is the link to the codepen: https://codepen.io/anurag1989/pen/bGOybYr
Now, the main problem is:
(1) When img::before has been assigned z-index: -1, then it is sent behind .card (as per docs, any element with negative z-index in sent behind its parent. But, here, .img is the immediate parent container so why ::before is sent behind .card and not behind .img?)
(2) When img::before has been assigned z-index: -1 and .card z-index: 1, then the ::before is sent behind .img and above .content
(3) When img::before has been assigned z-index: -1, .card z-index: 1 (optional) and .img z-index: 1, then ::before is sent behind img but above .img.
In this way there are other combinations of z-indexes for this scenario which is proving difficult for me. Can somebody explain me what exactly is happening here?
I am working on a small assignment based on HTML/CSS which involves coding a information card. Here is the link to the codepen: https://codepen.io/anurag1989/pen/bGOybYr
Now, the main problem is:
(1) When img::before has been assigned z-index: -1, then it is sent behind .card (as per docs, any element with negative z-index in sent behind its parent. But, here, .img is the immediate parent container so why ::before is sent behind .card and not behind .img?)
(2) When img::before has been assigned z-index: -1 and .card z-index: 1, then the ::before is sent behind .img and above .content
(3) When img::before has been assigned z-index: -1, .card z-index: 1 (optional) and .img z-index: 1, then ::before is sent behind img but above .img.
In this way there are other combinations of z-indexes for this scenario which is proving difficult for me. Can somebody explain me what exactly is happening here?
