Hola kiko: No hay de que pedir perdón, acá todos estamos aprendiendo.
Observo que tienes a .HeaderMiddle y a .HeaderConcursoMarco como hermanos, ambos hijos de .HeaderCenter. Aquí el error.
.HeaderCenter tiene position:absolute; por lo tanto no te sirve ya que ahora la posición (cotas o distancia) de .HeaderConcursoMarco pasa a depender de .Header que si bien esta en relativo tiene un width:100% y no tiene margin:0 auto; por lo tanto tampoco te sirve.
¿Recuerdas que para que sirva de contenedor tenía que tener position:relative;?
¿se comprende mejor ahora?
Prueba integrar esta lógica en tu código:
Código HTML:
Ver original<div class="HeaderCenter"> <!-- hermanos start -->
<div class="HeaderLogo"/></div> <div class="HeaderMenu"></div> <div class="HeaderMiddle"></div> <div class="HeaderBottom"></div> <div class="HeaderConcursoMarco"/></div> <!-- lo ponemos como hermano para que trabaje el z-index--> <!-- hermanos end-->
Código CSS:
Ver original.HeaderCenter{position:relative; margin:0 auto; width:...px;} /*Al padre lo posicionamos en relativo para que sirva de contenedor de los hijos absolutos*/
.HeaderMiddle, .HeaderConcursoMarco{position:absolute;}
.HeaderMiddle{z-index:1; top: ...px; left: ...px;}
.HeaderConcursoMarco{z-index:0; top: ...px; left: ...px;}
Un abrazo.
p/d: me parece en este caso puntual no muy acertado el camino que estas tomando con ese slide.
¿No sería mejor trabajar las imagenes con bordes redondeados en photoshop (si es que no te convence css3 y border-radius aún, por ie digo) y uses algun slide como el
nivoslider con efecto fade para la transición de imagenes?
Solo un punto de vista, luego lo haces como creas mejor claro.