Buenas, estoy haciendo un theme de wordpress donde, al hacer hover en la img, se le suponerpone un cuadrito verde con el texto de "ver trailer" y aparece un recuadro .excerpt con posicion absoluta a la izquierda. Mi problema es .excerpt aparece detrás del resto de los elementos, y eso que le coloqué el z-index 1 a .poster que tiene posicion relativa y .excerpt un z-index 999 que tiene posicion absoluta. ¿Cómo podria hacer para que .excerpt aparezca sobre .poster? <article class="col-xs-12 col-sm-12 col-md-3 col-lg-3"> <div class="mov-medium"> <a href="<?php the_permalink();?>"> <div class="poster"> <img src="<?php printf( '%s',main_image_url( 'medium' ));?>"> <strong> <i class="ico"></i> VER TRAILER </strong> <div class="excerpt"> <i></i> <h2><?php the_title();?></h2> <?php the_excerpt();?> </div> </div> </a> <p><?php the_title();?></p> </div> </article> Y este es el css .poster{ background-color: #AFD139; width:100%; height:200px; position: relative; z-index:1; } .poster strong { position: absolute; top: 50%; margin-top: -22px; line-height: 20px; padding-top: 25px; width: 100%; left: 0; opacity: 0; color:#fff; text-align:center; } .ico{background: url(./img/bg.png) no-repeat;} .poster strong .ico{ width: 30px; height: 19px; position: absolute; top: 0; left: 50%; margin-left: -15px; } .poster:hover{background-color: #AFD139;} .poster:hover strong{opacity:1;color:#fff;} .poster:hover img{opacity:0.2;} .poster:hover .excerpt{display:block;} .poster img{ width:100%; height:200px; } .excerpt{ width: 290px; background-color: #323232; padding: 10px; top: -11px; right: -341px; position:absolute; z-index:999; display:none; } .excerpt i{ width: 0; height: 0; border-top: 10px solid transparent; border-right: 10px solid #323232; border-bottom: 10px solid transparent; position: absolute; left: -10px; top: 10px; } .excerpt h2{ line-height: 20px; font-size: 14px; font-weight: 700; padding-bottom: 10px; border-bottom: 1px solid #222; color:#fff!important; margin:0; } .excerpt p{ border-top: 1px solid #444; border-bottom: 1px solid #222; padding: 10px 0; color: #999; line-height: 15px; font-weight: 100; } .mov-medium > p{ height:33px; max-height:33px; overflow:hidden; margin:1rem 0; }