J'essaie de pousser l'ombre du div de frère à l'arrière du div. J'ai parcouru les autres questions liées à cela, mais aucune d'entre elles n'a fonctionné pour moi.

J'ai essayé d'ajouter position et z-index mais pas de chance jusqu'à présent. Voici le CSS que j'utilise

#example1 {
  padding: 10px;
  box-shadow: 5px 12px 15px #888888;
  margin-bottom: 5px;
  position:relative;
  z-index: 1000;
}

HTML

<div id="example1">
  <p>The optional third value adds a blur effect to the shadow.</p>
</div>

<div id="example1" >
  <p>More blurred.</p>
</div>

<div id="example1">
  <p>More blurred and red.</p>
</div>

L'ombre devrait être derrière le div de frère, mais elle tombe sur le div de frère.

Voici l'exemple en direct.

enter image description here

0
rahul gawale 18 avril 2020 à 09:39

3 réponses

Meilleure réponse

Je vois que certains étaient devant moi, mais pour ne placer que le deuxième div sur le dessus, assurez-vous de ne définir la couleur d'arrière-plan que sur ce div:

.example1 {
  padding: 10px;
  margin-bottom: 5px;
  position: relative;
}

.example1::before {
  box-shadow: 5px 12px 15px #888888;
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: -1;
}

.pushtop {
  background: white;
}

Voir jsfiddle: https://jsfiddle.net/sanderdebr/kj1b7mgv/16/

1
sanderdebr 18 avril 2020 à 07:21

Est-ce que cela résout votre problème?

.example {
  padding: 10px;
  box-shadow: 5px 12px 15px #888888;
  margin-bottom: 10px;
  position: relative;
  z-index: 1;
  background: white;
}


/**
.example1 {
  z-index: 1;
}

.example2 {
  z-index: 2;
}

.example3 {
  z-index: 3;
}
**/
<div class="example example1">
  <p>The optional third value adds a blur effect to the shadow.</p>
</div>

<div class="example example2">
  <p>More blurred.</p>
</div>

<div class="example example3">
  <p>More blurred and red.</p>
</div>
1
SpiritOfDragon 18 avril 2020 à 06:52

Tout d'abord, n'utilisez pas le même ID sur plus d'un élément.

Deuxièmement, donnez à vos divs un background-color.

C'est ça.

.example {
  padding: 10px;
  box-shadow: 5px 12px 15px #888888;
  margin-bottom: 5px;
  position: relative;
  background-color: white;
}
<div id="example1" class="example">
  <p>The optional third value adds a blur effect to the shadow.</p>
</div>

<div id="example2" class="example">
  <p>More blurred.</p>
</div>

<div id="example3" class="example">
  <p>More blurred and red.</p>
</div>
1
thingEvery 18 avril 2020 à 06:50