CSS : problème z-index entre un div en absolute et deux div relative

Nightbringer
Les bases HTML/CSS

Bonjour, j'ai un petit problème avec le z-index. J'ai plusieurs bloc en **position: relative; float: left** qui contient mon contenu, des liens des boutons... Dans ce conteneur j'ai un lien stylé en forme de bouton qui est en **display: inline-block; position:relative;**. Sur ce bouton j'ai un pseudo-element **bouton::before { background: red; position: absolute; z-index: -1;}** Le gros problème est que le pseudo-element va se mettre sous la premier bloc conteneur qui est en position relative et float left... Et quand je met des z-index au bouton et au conteneur, le pseudo-element en position absolute viens se positionner au dessus... Je voudrais pouvoir position les éléments dans l'ordre suivant : - Le conteneur en float: left; position: relative; - Le pseudo-element before en position: absolute; z-index: -1; - Le bouton en position: relative;display: inline block; HTML [code]<section class="block grid5">
<div class="title">title</div>
<div class="content">
<span>
<a href="#" class="button btn-bordered">This is a button</a>
</span>
</div>
</section>[/code] SASS [code] .block { display: block; position: relative; float: left; text-align: left; font-size: 10pt; @include box-shadow(rgba(0,0,0,0.5) 0 0 5px 1px); .title { color: white; font-size: 11pt; } .content { display: block; background-color: #EEEEEE; border: 1px solid $top_bar_color; border-top: 0; span { display: block; padding: 10px;/*for fix jumping jQuery slideToggle();*/ } } a.button { display: inline-block; position:relative; padding:10px; height: 100%; margin-right: 5px; margin-top: 5px; font-family: 'Open Sans', sans-serif; font-size:12px; text-decoration:none; color: rgba(255, 255, 255, 0.8); @include border-radius(5px); } a.btn-bordered { margin: 13px; &:before{ background-color:#ccd0d5; content:""; display:block; position:absolute; width:100%; height:100%; padding:8px; left:-8px; top:-8px; z-index:-1; border-radius: 5px; @include box-shadow(inset 0px 1px 1px #909193,0px 1px 0px #fff); } }[/code] Merci d'avance. Cordialement

5 réponses

Maenhyr

Salut,
Par défaut, le pseudo élément before se placera avant le bouton et le pseudo élément after se placera APRES le bouton. Je te conseille donc d'utiliser le pseudo element ::after qui te permettra d'éviter de jouer avec les z-index. C'est toujours délicat à gérer après lorsque l'on ajoute des élements ou que l'on importe une librairie JS tierce (genre modal) qui en abuse pour se placer en premier plan.

Du coup, il te suffit de placer ton bouton en position:relative; le pseudo élément en

position:absolute;
top:0;
left:0;

et le tour est joué!

Nightbringer
Auteur

Salut !
Merci pour ta réponse, mais j'avais déjà essayé en essayant de mettre le pseudo-element en after mais du coup il passe devant le bouton et ce n'est pas le résultat escompté...

Nightbringer
Auteur

Je relance le truc avec un complément.
Dans ce tutoriel : http://www.grafikart.fr/tutoriels/html-css/boutons-css3-276
On a un effet de container sur les boutons par exemple pour demo1.
Si on met l'opacité de la section à 1 on peux voir que c'est le même problème que moi.
Le ::before ou ::after passe dessous le bloc section alors qu'il devrait être entre le bloc section et le bouton...

Voilà en espérant que quelqu'un est une piste... c'est quand même génant de ne pas pouvoir placer des elements sous un a lorsque qu'ils sont contenu dans un autre...

Folki

Peux tu essayer d'utiliser tes float en display:inline-block, puis de les rajouter en vertical-align:top, pour voir...

Nightbringer
Auteur

Bonjour,
merci pour ta réponse, mais rien à faire le comportement est toujours le même, ...