z index - Inset box-shadow beneath content

Question

I don't understand why, but an inset box shadow is beneath my content.

Here's an example:

div {
   box-shadow:inset 0 0 10px black;
   height:300px;
   color:red;
}

<div>
   a
</div>

question from:https://stackoverflow.com/questions/13188828/inset-box-shadow-beneath-content

Answer 1

You need to make a new element inside the div, with absolute positioning and height and width of 100%, then give that element the box shadow.

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>