0

I have this issue where I'm trying to create shadows for all divs on the website, and trying to be smart about it. Some divs have to be positioned fixed, some other absolute. But they will be close, so if the shadow are not really under, they will overlap.

See here how it looks now :

enter image description here

You can see here the codepen if you want to play around : https://codepen.io/ifeltblankk/pen/vYXYmwv

So all pseudo elements are z-index -1, and the div elements have no z-index. The issue is that fixed elements get a z-index on top, and their shadows are overflowing on top of absolute divs, except as you see, if they are positioned after in the html (div 3).

Do you have any idea of how I can achieve the shadows to be all below any div with any positioning? There will be 20 div per page so I Don't think creating a duplicate for each is sustainable.

div{
  text-align:center;
  font-size:15pt;
}

div:after{
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    z-index: -1;
    position: absolute;
    left: 0;
    top: 0;
    box-shadow: 0px 0px 6vw 6vw black;
}

.absolute{
  height:14vh;
  width:32.5vw;
  top:5vh;
  left:22.5vw;
  position:absolute;
  background-color:lavender;

}

.absolute2{
  height:140vh;
  width:32.5vw;
  top:22vh;
  left:22.5vw;
  position:absolute;
  background-color:lavender;
  
}

.absolute3{
  height:40vh;
  width:37.5vw;
  top:30vh;
  right:5vw;
  position:absolute;
  background-color:lavender;
}

.fixed{
  height:20vh;
  width:38.5vw;
  top:5vh;
  right:5vw;
  left:auto;
  position:fixed;
  background-color:lavender;

}

.fixed2{
  height:40vh;
  width:16vw;
  top:5vh;
  left:5vw;
  position:fixed;
  background-color:lavender;

}
<div class="absolute">
(1) Absolute positionned div
</div>

<div class="fixed">
(2)  Fixed positionned div
</div>

<div class="absolute2">
 (3) Absolute positionned div 2
</div>

<div class="fixed2">
(4) Fixed positionned div
</div>

<div class="absolute3">
 (5) Absolute positionned div 3
</div>
Dikeneko
  • 344
  • 4
  • 19
  • https://philipwalton.com/articles/what-no-one-told-you-about-z-index/ has a pretty good explanation of how stacking contexts work. – CBroe Nov 27 '20 at 13:27
  • I am afraid that this is not possible. All elements will have a position in the stacking context. So one element will always be above, or below every other element. So i think your best shot is to just make the shadows small enough, to not collide with the other objects. – Bjørn Nyborg Nov 27 '20 at 13:39
  • Thanks CBroe, I already read that article! Thank you Bjorn, but that's the design constraint I have, that's the beauty of what I want to create, it's shadow colliding :) – Dikeneko Nov 27 '20 at 13:44
  • @Dikeneko may be svgs can help you here – Prathamesh Koshti Nov 27 '20 at 13:46
  • @PrathameshKoshti Svg, how so ? – Dikeneko Nov 27 '20 at 13:48
  • read until the end of the duplicate to find the 3D transform trick – Temani Afif Nov 27 '20 at 14:28
  • The 3D transform does change the stacking order of the fixed div, but then they end up under the absolute div, and the shadow of the absolute div passes over, so that doesn't fix the issue.... – Dikeneko Nov 27 '20 at 15:36
  • I tried it, but when it works, the position fixed stops working! – Dikeneko Nov 27 '20 at 15:44

0 Answers0