How to Layer Box-Shadows Using Z-Index

How to layer box-shadows using z-index?

Demo: http://codepen.io/anon/pen/vLgKC

Tip: Make sure position is explicitly set on elements with z-index e.g. relative etc, even if you're fine with the default, it has to be set.

For more info on z-index and stacking context and the priorities please see my answer here.

The above, combined with the inset for box-shadow

inset

If not specified (default), the shadow is assumed to be a drop shadow (as if the box were raised above the content).
The presence of the inset keyword changes the shadow to one inside the frame (as if the content was depressed inside the box).
Inset shadows are drawn inside the border (even transparent ones), above the
background, but below content.

And a negative spread

spread-radius

This is a fourth value. Positive values will cause the shadow to expand and grow bigger, negative values will cause the
shadow to shrink. If not specified, it will be 0 (the shadow will be the same size as the element).

(Both here)

Will give you the effect that you are looking for.

So you will need to change the place that the shadows are applied on elements.

So the final CSS:

   #b {
      background: orange;
      z-index: 2;
      position: relative;
    }
    
    #c {
      background: red;
      -webkit-box-shadow: inset 0 10px 10px -10px black;
      -moz-box-shadow: inset 0 10px 10px -10px black;
      box-shadow: inset 0 10px 10px -10px black;
      z-index: 1;
      position: relative;
    }
    
    ul {
      list-style: none;
      margin: 0;
      padding: 0;
      z-index: 1;
      position: relative;
    }
    li {
      display: inline-block;
      padding: 2px 5px;
    }
    
    .current {
      background-color: orange;
      z-index: 3;
      position: relative;
    }
    
    #d {
      box-shadow: 0 0 10px black;
      z-index: 2;
    }

<div id="a">
  <div id="b">bbb</div>
  <div id="c">
    <ul>
      <li>a</li>
      <li class="current">b</li>
      <li>c</li>
      <li>d</li>
    </ul>
  </div>
</div>
<div id="d">dddd
</div>

css3 drop shadow under another div, z-index not working

The z-index property works only on positioned elements. Those include position: relative, position: absolute, position: fixed, and position: sticky elements.

Try to give your div #middle a position: relative.

CSS z-index for Shadow only

As @connexo said, the shadow of an element is always on the same z-index level of its element.

A possible workaround is to create an other hidden element, which will stand on a lower layer, animated while hovering you real button :

body {  background: #292f33;  text-align: center;  color: #FFF;  font-family: sans-serif;}.btntest {  width: 190px;  padding: 4px;  border-radius: 5px;  background: red;  color: white;  z-index: 299;  position: fixed;}.button {  position: fixed;  z-index: 300;  left: 10px;  display: inline-block;  height: 60px;  width: 60px;  border-radius: 50%;  background: rgba(255, 255, 255, 1);}.fake-btn {  position: fixed;  z-index: 298;  left: 10px;  display: inline-block;  height: 60px;  width: 60px;  border-radius: 50%;  margin: 0;  background: rgba(255, 255, 255, 0);}.button:hover + .fake-btn {  animation: pulse 1.1s ease-out;  animation-iteration-count: infinite;}@keyframes pulse {  0% {    box-shadow: 0 0 0 0 rgba(85, 172, 238, 0);  }  25% {    box-shadow: 0 0 0 2px rgba(85, 172, 238, .4);  }  49.9% {    box-shadow: 0 0 0 5px rgba(85, 172, 238, 0);  }  50% {    box-shadow: 0 0 0 0 rgba(85, 172, 238, 0);  }  75% {    box-shadow: 0 0 0 20px rgba(85, 172, 238, .6);  }  99.9% {    box-shadow: 0 0 0 7px rgba(85, 172, 238, 0);  }  100% {    box-shadow: 0 0 0 0 rgba(85, 172, 238, 0);  }}@-webkit-keyframes pulse {  0% {    box-shadow: 0 0 0 0 rgba(85, 172, 238, 0);  }  25% {    box-shadow: 0 0 0 2px rgba(85, 172, 238, .4);  }  49.9% {    box-shadow: 0 0 0 5px rgba(85, 172, 238, 0);  }  50% {    box-shadow: 0 0 0 0 rgba(85, 172, 238, 0);  }  75% {    box-shadow: 0 0 0 20px rgba(85, 172, 238, .6);  }  99.9% {    box-shadow: 0 0 0 7px rgba(85, 172, 238, 0);  }  100% {    box-shadow: 0 0 0 0 rgba(85, 172, 238, 0);  }}

<p>Pulse Effect</p>
<a class="button"></a><p class="fake-btn"></p><div class="btntest">Test</div>

Box-shadow layering

Add this to your css:

#nav {
    position: relative;
    z-index: 1;
}

Apply box-shadow on some table columns

It's kind of a hack but it ends up similar to what you want.

I added a span to each td.

The logic is to have a :before element to cover the inner td space with white (background). The span meant to bring the text one layer ahead.

So the layers are

• Shadow (td) z-index: 0
  
  • White cover (:before) z-index: 1
    
    • Text (span) z-index: 2

table {
  margin: 50px;
  border-collapse: collapse;
}

td {
  padding: 2em;
  position: relative;
}

td:not(.transparent) {
  box-shadow: 0 8px 24px rgba(128, 128, 128, .15);
}

td:not(.transparent):before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  z-index: 1;
}

td:not(.transparent) span {
  position: relative;
  z-index: 2;
}

td.transparent {
  padding: 1em;
}

<table>
  <tr>
    <td>
      <span>test</span>
    </td>
    <td>
      <span>test</span>
    </td>
    <td class="transparent"></td>
    <td>
      <span>test</span>
    </td>
    <td>
      <span>test</span>
    </td>
    <td>
      <span>test</span>
    </td>
  </tr>
  <tr>
    <td>
      <span>test</span>
    </td>
    <td>
      <span>test</span>
    </td>
    <td class="transparent"></td>
    <td>
      <span>test</span>
    </td>
    <td>
      <span>test</span>
    </td>
    <td>
      <span>test</span>
    </td>
  </tr>
  <tr>
    <td>
      <span>test</span>
    </td>
    <td>
      <span>test</span>
    </td>
    <td class="transparent"></td>
    <td>
      <span>test</span>
    </td>
    <td>
      <span>test</span>
    </td>
    <td>
      <span>test</span>
    </td>
  </tr>
</table>

Inset box-shadow beneath content

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>

Why doesn't my box-shadow overlap correctly on these flex children?

I can't figure out why all these manipulations with z-index? The blocks are already in the correct order. But, as long as you have a transparent #header, the shadow of #main-nav will be visible. So just add a background color for the #header:

* {
  margin: 0;
}

#main-container {
  display: flex;
  width: 100%;
  height: 100%;
  background-color: #f3f3f3;
}

.main-container-right {
  position: relative;
  width: 100%;
  height: 800px;
}

#main-nav {
  position: sticky;
  display: flex;
  flex-direction: column;
  width: 100px;
  height: 800px;
  border: 1px solid #c4c4c4;
  background-color: #f3f3f3;
  box-shadow: 0px 4px 10px 10px #0004;
}

#header {
  position: sticky;
  display: flex;
  height: 30px;
  width: 100%;
  background-color: #f3f3f3;
  box-shadow: 0px 4px 4px #0004;
}

<div id="main-container">
  <nav id="main-nav">
  </nav>
  <div class="main-container-right">
    <header id="header">
    </header>
  </div>
</div>

---

Related Topics