css3 slagschaduw onder een andere div, z-index werkt niet

ik probeer een slagschaduw te gebruiken om het te laten lijken alsof de ene div (de kop) “boven” de andere staat. mijn probleem is dat de “middelste” div de slagschaduw bedekt. ik heb geprobeerd z-index te gebruiken om de header-div over de middelste div te plaatsen, maar het werkt niet (de schaduw wordt nog steeds bedekt). wanneer ik een pauze tussen de divs plaats, kan ik de schaduw zien en daarom weet ik dat een deel van de code goed werkt. ik heb de volgende html-code:

<div id='portal_header_light'>
<img src="Home.png" height="32px" \>
<img src="Wrench.png" height="32px" \>
</div>
<div id='middle'></div>

en deze css:

#portal_header_light {
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px; text-align:center;
    -moz-border-radius: 3px 3px 3px 3px;
    -webkit-border-radius: 3px 3px 3px 3px;
    padding: 0px 3px 0px 3px;
    background: -moz-linear-gradient(center top, #999999 0%,#ffffff 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #999999),color-stop(1, #ffffff));
    -webkit-box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.3);
    box-shadow: 0 1px 10px rgba(0, 0, 0, 0.3);
    z-index:5;
}
#middle{
    height:308px;
    background-color:white;
    z-index:-1;
}

enig idee? bedankt.


Antwoord 1, autoriteit 100%

De eigenschap z-indexwerkt alleen op gepositioneerdeelementen. Deze omvatten position: relative, position: absolute, position: fixeden position: sticky-elementen.

Probeer je div #middleeen position: relativete geven.


Antwoord 2, autoriteit 10%

Probeer een schaduw van een inzetvak OP het element waaronder u wilt verschijnen.

.element-that-is-to-be-under{
    -webkit-box-shadow: inset 0 8px 4px -4px #ddd;
    -moz-box-shadow: inset 0 8px 4px -4px #ddd;
    box-shadow: inset 0 8px 4px -4px #ddd;
}

Als je dit doet, wordt de z-index shuffle minder en zul je op de lange termijn veel gelukkiger zijn.


Antwoord 3, autoriteit 4%

Voortbouwend op de andere antwoorden hier, vond ik dat dit beter werkte door position: relativeop #portal_header_lightte plaatsen in plaats van #middle. Dan hoefde ik geen z-index: -1te hebben, wat (tenminste in Chrome) de hover-effecten van de cursorlink in de war bracht en een aantal andere vreemde problemen veroorzaakte.

http://jsfiddle.net/thaddeusmt/m6bvZ/

Hier is de vereenvoudigde code:

<div id="portal_header_light">Header Content</div>
<div id="middle">Test Content</div>
#portal_header_light {
  position: relative;
  padding: 3px;
  background: #eee;
  -webkit-box-shadow: 0px 4px 10px -2px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 0px 4px 10px -2px rgba(0, 0, 0, 0.3);
  box-shadow:  0 4px 10px -2px rgba(0, 0, 0, 0.3);
  z-index:5;
}
#middle{
  height:308px;
  background-color:#fee;
  padding: 3px;
}

Other episodes