2

I found this solution Inset box-shadow beneath content which works just fine, but when the outer container div has to be scrolling (overflow), the inner div which has the box-shadow will scroll with the content. How to fix this?

div {
    height:300px;
    color:red;
    position:relative;
}

div div {
    box-shadow:inset 0 0 10px black;
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
}
<div>
    <div></div>
    a
</div>
aMJay
  • 2,215
  • 6
  • 22
  • 34
medk
  • 9,233
  • 18
  • 57
  • 79

1 Answers1

1

you can consider adding an overlay and use z-index to specify which block is on top to put the shadow over or under the content.

div {
    height:300px;
    color:red;
    position:relative;
}

div div {
    padding: 10px;
    position:absolute;
    top:0;
    left:0;
    width:95%;
    height:100%;
    overflow: scroll;
    background: none;
    z-index: 99;
}

#overlay{
  display: block;
  width: 95%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  box-shadow: inset 0 0 200px black;
  z-index: 1;
}
<div>
    
    <div>
      lorem ipsum dolor <br />
      lorem ipsum dolor <br />
      lorem ipsum dolor <br />
      lorem ipsum dolor <br />
      lorem ipsum dolor <br />
      lorem ipsum dolor <br />
      lorem ipsum dolor <br />
      lorem ipsum dolor <br />
      lorem ipsum dolor <br />
      lorem ipsum dolor <br />
      lorem ipsum dolor <br />
      lorem ipsum dolor <br />
    </div>   
    <span id="overlay"></span>
</div>
Taki
  • 17,320
  • 4
  • 26
  • 47
  • Same problem here, the content will be above the shadow, so, not the desired effect. – medk Apr 04 '18 at 14:38
  • 1
    i updated my answer, just added `z-index` to specify which is on top of the other – Taki Apr 04 '18 at 15:11