Me temo que lo del z-index puede ser algo más complicado porque hay posiciones absolutas involucradas.
He abierto tu página en Firefox y aparecen los elementos descolocados. Además cuando redimensionas la ventana del navegador, la página permanece centrada pero la barra roja que tienes debajo no se centra junto al resto.
Considera la posibilidad de introducir estos cambios:
Código CSS:
Ver original#slider .container {
cursor: pointer;
height: 355px;
overflow: hidden;
position: absolute; /*Cambiar esta posición de relativa a absoluta*/
width: 877px;
}
.barra_roja {
/* usar un margen negativo de 13 px para posicionar en lugar de top: 564px; en caso de ser necesario */
margin: -13px auto 0; /*Eliminar la posición absoluta y centrar este contenedor*/
width: 985px; /*Adecuar el ancho del div al de la imagen */
}