Z-index "stacking" in creating a shadow

Question

I have the following HTML structure that I'd like to keep nested:

<div class="parent">
    <div class="shadow">Shadow here!</div>
</div>

CSS:

.parent {
    background: blue;
    z-index: 2;
    height: 200px;

}

.shadow {
    background: lightgrey;
    z-index: 0;
    opacity: 0.4;
    position: relative;
    top: 194px;
}

Essentially, I want the div .shadow to be underneath the div .parent. If you look at the rendering at the below link, you can see that part of the parent's blue background goes through the shadow; instead, I'd like the parent element to cover that overlapping part (stacked on top of, I guess you can say):

https://jsfiddle.net/9ya7kb67/

How could I do this? I'm fiddling around with z-index, but that isn't helping.

Answer 1

You can use box shadow with CSS3 https://css-tricks.com/snippets/css/css-box-shadow/

Answer 2

This is simple... give your shadow z-index property negative value like this. You can also manage z-index by giving higher value. Or you can use box-shadow property to make shadow.

.parent {
background: blue;
z-index: 2;
height: 200px;

}

.shadow {
background: lightgrey;
z-index: -1;
opacity: 0.4;
position: relative;
top: 194px;
}

Answer 3

I'm not sure if it is the answer you are looking for, but you can always use the CSS property box-shadow on your parent to get a 'shadowy' effect.

See this fiddle here

You can find box shadow generators online to make your life easier, such as this one

Answer 4

Because the shadow is INSIDE of the parent, there is no way to make the parent appear on top of whatever is inside. This is because in CSS a child element inherits the z-index of its parent as a BASE z-index. It can have its own z-index but it can never be less than its parent.

EDIT: Box shadow solution - https://jsfiddle.net/9ya7kb67/3/

.parent {
   background: blue;
   z-index: 2;
   height: 200px;
   box-shadow: 0 8px 0px 4px lightgrey;    
}

EDIT2: I stand corrected about it being impossible to put a child below a parent. You CAN actually do this, but that is assuming that the parent does not already have a z-index set. If the parent has a z-index, THEN it is impossible to place it on top of a child.

Answer 5

.shadow requires a negative z-index value as z-index is inherited from it's parent and is comparatively displayed. z-index:0; gives it the same overall z-index the parent has, and as the child was declared after the parent, it is therefore on top. This means that by setting it to z-index:-1 you are placing the shadow behind the parent.

However, if you simply want a box-shadow I would recommend actually using CSS3 Box Shadows instead of creating additional elements.

Answer 6

CSS box-shadow works by creating a shadow behind an element. Thus, the element is already on top of the shadow. Here, z-index is not required.

the code:

.parent {
    background: blue;
    height: 200px;
    box-shadow: 0 8px 0 4px light grey;
}

is doing the same thing regardless if you include z-index or not.