Encart box-shadow en dessous de contenu

Je ne comprends pas pourquoi, mais un encart zone d'ombre est en dessous de mon contenu.

Voici un exemple:

CSS:

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

HTML:

<div>
   a
</div>

http://jsfiddle.net/MAckM/

Vous voyez le a est au-dessus de la zone d'ombre.

Comment puis-je obtenir la zone d'ombre pour être au top de la a?

  • J'ai déjà utilisé cette olution fonctionne très bien, mais de plus inportant chose est z-index de cette div:avant. N'oubliez pas de l'utiliser lorsque Vous avez de la difficulté à couvrir la totalité du contenu.
InformationsquelleAutor henryaaron | 2012-11-02
  1. 33

    Vous avez besoin de faire un nouvel élément à l'intérieur de la div, avec un positionnement absolu et la hauteur et la largeur de 100%, puis donner qu'élément de la zone d'ombre.

    HTML:

    <div>
    <div></div>
    a
</div>​

    CSS:

    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%;
}​

    Ici est un JSFiddle.

    Edit:

    Alternativement, vous pouvez utiliser un pseudo-élément:

    HTML:

    <div>
    a
</div>​

    CSS:

    div {
    height:300px;
    color:red;
    position:relative;
}

div:before {
    content:'';
    display:block;
    box-shadow:inset 0 0 10px black;
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
}​

    JSFiddle.

    • Dans les navigateurs modernes (incl. IE9+), le contenu généré (:before, :after) peut être utilisé à la place d'un élément réel. (IE8 prend en charge le contenu généré aussi, mais a un bug empêchant le contenu généré par être au-dessus de réel contenu, et bien sûr ne prend pas en charge CSS zone d'ombre de lui-même.)
    • Tout à fait raison. Et ses beaucoup plus belle solution, trop. Mise à jour de la réponse.
    • Soit la réponse est bien pour moi, mais j'ai un problème. Quand j'ai une autre div à l'intérieur de la centrale div l'ombre de l'élément ou de la pseudo classe fixe sur le dessus de l'intérieur de la div. Si j'ajoute un z-index à l'intérieur de la div, puis il va sur le dessus de la box-shadow. Essayez de cliquer sur le lien dans cette démo: jsfiddle.net/MAckM/5
    • Utilisation pointer-events:none; sur l'élément de superposition.
    • C'est rugueuse; caniuse.com/#feat=pointer-events. D'une autre manière?
    • Une autre solution serait de créer 4 éléments séparés avec des dégradés linéaires et de les positionner sur les bords, pour imiter ce que d'une zone d'ombre ressemblerait. Mais si IE soutien est ce que vous cherchez, j'ai peur que ça va pas le faire non plus.
    • Oui, je pensais que ce serait une autre manière :(. Merci
    • Apparemment, pour les récipients qui ont contenu défilant, il est préférable d'utiliser le vide div, comme :before fera de l'ombre en faisant défiler avec le contenu.
    • Pour moi, la div solution également faire de l'ombre à défiler. De Plus, je perds mes parents rembourrage pour adapter le contenu.
    • pouvez vous s'il vous plaît examiner cette question au sujet de votre solution? stackoverflow.com/questions/49652744/...
    • Faut vraiment être un :après si vous voulez qu'il apparaisse au-dessus de l'autre div (frère, sœur) contenus les éléments du dom sont empilés sur le dessus par défaut. Bien sûr, vous pouvez appliquer un z-index à l'avant, mais semble plus propre que d'un :après

    InformationsquelleAutor fncombo
  2. 0

    Cette réponse vous propose la solution la plus simple via un exemple minimal et aborde la question de défilement.

    Malheureusement, il n'existe aucun moyen d'éviter un emballage supplémentaire div (en raison de box-shadow la superposition).

    CSS:

    .container {
  position: relative;
}

.container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  box-shadow: inset 0 0 9px 3px yellow;
  pointer-events: none;
}

.items {
  height: 100px;
  overflow: scroll;
}

    HTML:

    <div class="container">
  <div class="items">
    <div class="item">One</div>
    <div class="item">Two</div>
    <div class="item">Three</div>
    <div class="item">Four</div>
    <div class="item">Five</div>
    <div class="item">Six</div>
    <div class="item">Seven</div>
    <div class="item">Eight</div>
    <div class="item">Nine</div>
    <div class="item">Ten</div>
    <div class="item">Eleven</div>
    <div class="item">Twelve</div>
  </div>
</div>

    InformationsquelleAutor Michael Plotke