web-dev-qa-db-fra.com

Encadré ombre sous le contenu

Je ne comprends pas pourquoi, mais une ombre de boîte incrustée est sous mon contenu.

Voici un exemple: 

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

http://jsfiddle.net/MAckM/

Vous voyez que a est au-dessus de l'ombre de la boîte.

Comment puis-je obtenir l'ombre de la boîte au-dessus de a?

cssz-indexcss3
27
henryaaron

Vous devez créer un nouvel élément dans la div, avec un positionnement absolu, une hauteur et une largeur de 100%, puis attribuer à cet élément l'ombre de la boîte.

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

Voici un JSFiddle .

Modifier:

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 .

31
fncombo

Cette réponse offre la solution la plus simple via un exemple minimal et aborde le problème du défilement.

Malheureusement, il n’ya aucun moyen d’éviter un wrappage supplémentaire div (à cause de box-shadow layering ).

.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;
}
<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>

0
Michael Plotke