Supongo que no sera tan dificil

[khodex]

Hola, tengo la siguiente web:

http://www.chiefbeerofficer.com/

Y me gustaria que la seccion de Headline Dinners, Industry Roundtables...
quedara un poco por encima de la linea amarilla, pero por mas que toco el z-index no logro hacerlo. El slider termina siempre tapando dichos titulos en lugar de ser los titulos los que queden por encima del slider.

Gracias.

[cristian_cena]

Hola, en verdad es muy sencillo, pero hacia falta ponerlo en el titulo? jaja no problem.
- quita todos los z-index
- tip: z-index necesita que las cajas que intervengan en la pila estén posicionadas con algun valor distinto de static (valor por defecto)
- chequea este código y trasladalo a tu problema:

Código HTML:

<div id="wrap">
    <div id="slider">slider</div>
    <div id="bottom">bottom</div>
</div>
 

Código CSS:

#wrap{
    position:relative; /*contenedor relativo, para controlar las cotas de las cajas absolutas anidadas*/
}
#slider, #bottom{
    width: 200px;
    height: 200px;
    padding: 16px; 
}
#slider{
    background: skyblue;
    position: relative; /*como no necesitamos desplazarlo dejamos relativo*/
    top: 0; 
    left: 0;
    z-index: 0;
}
#bottom{
    background: orange;
    position: absolute; /*usamos posicion absoluta solo para ilustrar el caso, puede que te venga bien o que necesites otra cosa o no*/
    top: 100px; 
    left: 100px;
    z-index: 1;
}
 

puede que necesites encararlo de otra forma, cualquier cosita mostranos el código del problema (no toda la web por favor porque sinceramente no tendría tiempo de verla)

Saludos.

[khodex]

El codigo del slider es este:

/* Full-Width Home Page Slider */
#slider-full-width { width: 1920px; height: 650px; position: relative; left: -510px; display: none; }
#slider-full-width ul { list-style-type: none; }
#slider-full-width * { margin: 0; padding: 0; }
#slider-full-width li { width: 1920px; height: 650px; text-align: center; }
#slider-full-width .text-bg { position: absolute; bottom: 0; left: 0; width: 1920px; height: 58px; }
#slider-full-width .text { position: absolute; bottom: 18px; left: 510px; width: 700px; text-align: left; }
#slider-full-width h2 { display: inline; font-size: 18px; line-height: 24px; }
#slider-full-width h2 a:hover { text-decoration: none; }
#slider-full-width p { display: inline; font-size: 20px; margin-left: 7px; }

#slider_nav { position: absolute; right: 960px; bottom: 16px; width: 200px; height: 20px; z-index: 20; list-style: none; }
#slider_nav li { overflow: hidden; display: block; float: right; height: 24px; margin: 0 0 0 7px; padding: 0; width: 24px; }
#slider_nav li:hover { cursor: pointer; z-index: 5000; }
#slider_nav_left { width: 18px; cursor: pointer; height: 33px; position: absolute; left: 0; top: 159px; }
#slider_nav_right { width: 18px; cursor: pointer; height: 33px; position: absolute; right: 0; top: 159px; }


Y el de la caja div que quiero poner por encima es este:


#page-full-width { width: 1280px; margin: 20px auto 0 auto; margin-left:-200px; }

[cristian_cena]

Del código anterior y viendo el tuyo:
Haz que #slider sea #slider-full-width (no veo el html pero este parece ser el contenedor)
y que #bottom sea #page-full-width