28172 sujets

CSS et mise en forme, CSS3

Z-index et pseudo-elements before-after

Bonjour,

Je suis confronté à un petit soucis de z-index pour ajouter un effet d'ombre sympatoche à certains blocs de mon site.
Sur une page ressemblant à ceci :


<body>
    <div id="page">
        <div id="bloc_conteneur">
            <div id="bloc_avec_ombres" class="bloc curve">
            </div>
        </div>
    </div>
</body>


Et grâce aux pseudo éléments "before" et "after", j'ajoute un effet d'ombres courbées à mon bloc d'id "bloc_avec_ombres".


.bloc				{ position: relative; background: #f0e8d8; padding: 15px; }
.bloc:after,
.bloc:before		{ content: " "; position: absolute; width: 150px; height: 20px; z-index: -10; background-color: yellow; }  
.bloc:before		{  }  
.bloc:after			{  }

.curve				{  }
.curve:before		{ bottom: 7px; left: 5px; transform: rotate(-5deg); -moz-transform: rotate(-5deg); box-shadow: 7px 6px 15px #333; -moz-box-shadow: 7px 6px 15px #333; }  
.curve:after		{ bottom: 7px; right: 5px; transform: rotate(5deg); -moz-transform: rotate(5deg); box-shadow: -7px 6px 15px #333;	-moz-box-shadow: -7px 6px 15px #333; }


Ça marche relativement bien, jusqu'au moment ou je donne une couleur / image au background de "page".
J'imagine que c'est du à la propriété "z-index: -10;".

J'ai donc tripoté le z-index de mes divs dans tous les sens, sans avoir aucun résultat concluant. Soit mon ombre reste derrière "page", soit celle ci passe devant "bloc_avec_ombres".

J'ai pourtant regardé pas mal de doc mais z-index ne fait vraiment pas ce que j'attends de lui. ^^

Une piste? Merci !
Bon ben en fait, il semblerait que je me sois tout simplement emmêlé les pinceaux, et ai oublié une "position: relative;" sur mon bloc 'id="bloc_conteneur"'.

Je mérite le fouet!
Sujet clos
Aller à