Comment la couche de zone-ombres à l'aide de z-index?

codepen

html

<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>

css

#b {
  background: orange;
  box-shadow: 0 0 10px black;
  z-index: 2;
  position: relative;
}

#c {
  background: red;
  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;
}

Prendre un coup d'oeil au code du stylet. J'ai les couches plus ou moins la façon dont je le veux, sauf que je veux que la "b" de l'onglet à être au-dessus de la box-shadow causés par l'orange div ci-dessus.

D'élaborer, de l'orange #b div jette une ombre sur le rouge #c div, le .current onglet devrait apparaître rincer avec de l'orange #b div (ont pas d'ombre sur elle), et #d devrait pas jeté une ombre sur #c à tous.

Le problème est que le z-index sur .current ne semble pas fonctionner.

OriginalL'auteur mpen | 2014-04-14

  1. 8

    Démo: http://codepen.io/anon/pen/vLgKC

    Pour plus d'info sur z-index et l'empilage du contexte et des priorités s'il vous plaît voir ma réponse ici.

    Ci-dessus, combinée avec la inset pour box-shadow

    encart

    Si non spécifié (par défaut), l'ombre est supposé être une ombre portée (comme si la boîte ont été soulevées au-dessus du contenu).
    La présence de l'encart mot-clé changements de l'ombre à l'intérieur du cadre (comme si le contenu a été enfoncé à l'intérieur de la boîte).
    Encart ombres sont attirés à l'intérieur de la frontière (même transparent), au-dessus de la
    arrière-plan, mais le contenu ci-dessous.

    Et un negative spread

    propagation de rayon de

    C'est une quatrième valeur. Les valeurs positives seront la cause de l'ombre de développer et de croître plus grand, les valeurs négatives seront la cause de la
    de l'ombre à réduire. Si non spécifié, il sera de 0 (l'ombre sera de la même taille que l'élément).

    (Les deux ici)

    Va vous donner de l'effet que vous recherchez.

    De sorte que vous aurez besoin de changer le lieu que les ombres sont appliquées sur les éléments.

    Donc la dernière 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;
}
    Veuillez voir le jour réponse pour plus d'explication sur la façon dont cela fonctionne.
    À l'aide d'un médaillon de l'ombre pour créer l'illusion d'un autre élément a jeté une ombre sur l'actuel est très utile CSS truc! Idéal pour les situations où l'ordre DOM qui obtient le droit ombrage look est mauvais pour l'ordre des tabulations, etc.

    OriginalL'auteur Arbel

  2. 20

    Si vous êtes en utilisant le z-index, assurez-vous que l'élément a un attribut de position ou il ne fonctionnera pas. Lorsque vous utilisez z-index en css, définir la position de cet élément. (Absolue, relative, hériter...)

    J'ai oublié de mettre position: relative quelque part que je ne vois pas?
    J'ai essayé les autres suggestions avec, en médaillon, mais aucun d'entre eux travaillaient. L'ajout de position: relative a parfaitement fonctionné. Merci!

    OriginalL'auteur FreeStateNH

  3. 1

    Essayez d'utiliser l'encart box-shadow sur les éléments de la liste, et lorsque l'élément sélectionné est classe .current puis retirer le médaillon de l'ombre.

    inset n'est pas tout à fait donner l'effet que je veux. Aussi, il serait appliqué à #c, pas le li (je veux l'ombre sur l'ensemble de la barre).
    Passons..avec un écart négatif, tout semble bien fonctionner.

    OriginalL'auteur sunpietro