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