[CSS] Capa por encima de todas ?

[Diabliyo]

Buen dia.

Tengo un par de dudas respecto al CSS....

Me he bajado un Free CSS Template de internet para utilizarlo en mi plataforma web desarrollada en PHP, el problema es que una vez que termine de acondicionar el template y casi todo quedo bien, en la parte superior derecha el Template por defecto muestra una capa con la fecha actual, a esa capa solo le elimine la opcion de mostrar la fecha actual y puse un recuadro con menu desplegable (al hacer a:hover) y pues aparecen las opciones de la cuenta del usuario del sistema y demas cosas para el usuario registrado.

El primer problema es que, el menu de la parte superior derecha (el menu desplegable que ya mencione), queda detras de una capa que esta mas abajo, vaya, no alcanzo a ver TODAS las opciones del Menu, porque la capa que esta mas abajo se sobre pone encima.

Mi segunda duda es, como pueso hacer para que una capa se sobre ponga por encima de todas ?, es que quiero hacer el efecto con CSS y javascript de que cuando se pulse sobre una IMAGEN se abra una capa que este por encima de todas (capa en color negro, transparente).

Saludos !

[Nakp]

con la propiedad z-index muy positiva

[Diabliyo]

con la propiedad z-index muy positiva

Como puedo saber cual valor ponerle ?, ya que en el CSS existen como 2 o 3 capas que ya viene con un valor de z-index a: 999, 998 y 1. Y pues ya intente poniendo: z-index:1 (y valores hasta 100) y siempre esta por detras el menu desplegable ...

Asi carga el menu desplegable... OJO con la clase, se llama date porque se supone que en esa parte mostraba le fecha actual, y pues yo prefiero mostrar un menú desplegable:

Código (css) [Seleccionar] Expandir

<style>
.date {position:absolute; top:0; right:0; margin:0; width:150px;height:150px;}
.date ul {padding: 0;margin: 0;list-style: none;text-align:center;float:right;padding-right:3px;}
.date li {float: left;position: relative;width:110px;border:solid 1px #a8cdff;background-color:#e2eeff;
           font-size:11px;padding:2px;}
.date li ul {display: none;position: absolute;top: 1em;left: 0;}
.date li:hover ul {display: block;}
.date .list-in {text-align:left;margin-top:8px;margin-left:0px;}
.date .list-in li {border:solid 0px #a8cdff;border-left-width:1px;border-bottom-width:1px;
           border-right-width:1px;margin-left:0px;}
</style>

Código (php) [Seleccionar] Expandir

<?php
    echo '<div class="date">
      <ul>
       <li>Mi Perfil
       <ul class="list-in">
       <li><a href="#">Mis Campa&ntilde;as</a></li>
       <li><a href="#">Mi Informaci'. acento("o"). 'n</a></li>
       <li><a href="#">Configuraci'. acento("o"). 'n</a></li>
       <li><a href="#">Salir</li>
       </ul>
       </li>
      </ul>
    </div>';
?>

Y la capa que se pone encima de mi menu desplegable es una capa que forma una barra larga donde posiciona un INPUT para el proceso de busqueda dentro del sitio, el style es el siguiente:

Código (css) [Seleccionar] Expandir

#search-tabs {position:relative; bottom:-1px; padding-left:260px;}
#search-tabs ul {margin:0; padding:0; list-style:none;}
#search-tabs ul li {display:inline; margin:0; padding:0;}
#search-tabs ul li a {float:left; margin:0; padding:0 0 0 15px; text-align:center; cursor:pointer; font-size:120%;}
#search-tabs ul li a span {float:left; display:block; padding:0 15px 0 0; line-height:35px;
                       vertical-align:middle; text-decoration:underline;}
#search-tabs ul li a.active {background:#F0F6FF url("../design/search-active.gif") 0 0 no-repeat;
                        text-decoration:none; color:#2F2F2F; font-weight:bold;}
#search-tabs ul li a.active span {background:#F0F6FF url("../design/search-active-02.gif") 100% 0 no-repeat;
                        text-decoration:none;}
#search-top {width:900px; height:6px; background:#DCEBFF url("../design/search-top.gif") 0 100% no-repeat; font-size:0;}
#search {background:#DCEBFF url("../design/search.gif") 0 0 repeat-y; overflow:hidden;}
#search-in {padding:0px 0px 0px 0px; background:url("../design/search-in.gif") 0 0 no-repeat; font-size:12px;}
#search-in a {text-decoration:none;color:black;}
#search-in a:hover {text-decoration:underline;color:black;}
#search-bottom {width:900px; height:6px; background:#DCEBFF url("../design/search-bottom.gif") 0 0 no-repeat; font-size:0;}
#search-input01, #search-input02, #search-input03, #search-input04, #search-input05 {width:500px; padding:3px;
                       border:1px solid #66A6FF;}
.search-submit {position:relative;bottom:-7px;font-size:12px;}

[bizco]

creo que lo que pasa es ese div esta encerrado dentro de otro con el z-index superior a tu div, en este caso aun teniendo tu div un z-index mas alto se mostraria por debajo.

Código [Seleccionar] Expandir


.Uno
{
position: absolute;
width: 400px;
height: 400px;
background-color: blue;
z-index: 200;
}

.Dos
{
position: relative;
width: 400px;
height: 400px;
background-color: green;
left: 20px;
z-index: 100;
}


y esto:

Código [Seleccionar] Expandir


<div class="Uno"></div>
<div class="Dos"></div>


se mostrara encima el azul, pero con esto:

Código [Seleccionar] Expandir


.Tres
{
position: relative;
width: 400px;
height: 400px;
background-color: red;
left: 20px;
z-index: 1000;
}


y estando asi:

Código [Seleccionar] Expandir


<div class="Uno"></div>
<div class="Tres"><div class="Dos"></div></div>


se mostrara el verde encima del azul porque su contenedor tiene el z-index mas alto que el div azul.

No estoy seguro que sea ese tu caso, pero por lo que dices me temo que si. si puedes subir un ejemplo completo de tu problema (solo el html y css) y asi podemos mirarlo mejor.


PD: lo que quiero decir es que si tu div esta encerrado dentro de otro con un z-index inferior a ese div, se mostrara bajo de este de igual manera.

y si el div que se te pone encima esta encerrado dentro de otro con un z-index superior a tu z-index o al de tu contenedor, continuara poniendose encima. asi que no solo afecta el z-index de tu capa.

[[u]nsigned]

Ponele un valor altísimo a la propiedad z-index de esa capa. 100000 por ejemplo

[bizco]

si, pero si no identifica cual es el problema si le pone 1000000000000000000000 de z-index pero esta encerrada dentro de otra con z-index 1, se mostrara bajo.

[Diabliyo]

Les dejo el code completo:

Como acostumbro a programar con includes para tener un codigo mas desglozado y facil acceso al momento de estar arreglando detalles extras...

main.css

Código (css) [Seleccionar] Expandir

#main {width:900px; margin:0 auto; text-align:left;}
#header {position:relative; overflow:hidden; margin-bottom:-20px;border:solid 1px red;}
#logo {margin:0; border:0;}
#page {clear:both; margin:15px 0;}
.date {position:absolute; top:0; right:0; margin:0; width:150px;height:150px;}

Codigo HTML/PHP: http://pastebin.com/0Sg6i36E.



----- EDITADO -----

Ya logre se mostrara el menu desplegable, y no era cuestion del z-index, sino del estilo #header, la propiedad de overflow, estaba inicializada en hidden y la cambie a visible.

Pero Aun tengo problemas, ya que no entiendo porque razon el menu desplegable se esconde cuando intento acceder a alguno de los elementos del menu :S.

Ahora les proporciono informacion de las capas que se involcrab por envima y por abajo de la capa donde esta el menu desplegable.

1- Se abre la capa #header que contiene la capa #logo y la clase .date dentro.

Código (css) [Seleccionar] Expandir

#header {position:relative; overflow:visible; margin-bottom:-20px;border:solid 1px red;}
#logo {margin:0; border:0;}
.date {position:absolute; top:0; right:0; margin:0; width:150px;height:150px;}

2- Continua la capa #search-tabs que es donde aparece una barra para busqueda, abarca todo el ANCHO del sitio.

Código (css) [Seleccionar] Expandir

#search-tabs {position:relative; bottom:-1px; padding-left:260px;border:solid 1px orange;}
#search-tabs ul {margin:0; padding:0; list-style:none;}
#search-tabs ul li {display:inline; margin:0; padding:0;}
#search-tabs ul li a {float:left; margin:0; padding:0 0 0 15px; text-align:center; cursor:pointer; font-size:120%;}
#search-tabs ul li a span {float:left; display:block; padding:0 15px 0 0; line-height:35px; vertical-align:middle; text-decoration:underline;}
#search-tabs ul li a.active {background:#F0F6FF url("../design/search-active.gif") 0 0 no-repeat; text-decoration:none; color:#2F2F2F; font-weight:bold;}
#search-tabs ul li a.active span {background:#F0F6FF url("../design/search-active-02.gif") 100% 0 no-repeat; text-decoration:none;}

Dejo una IMAGEN/SCREENSHOT para que visualizen el menu desplegable del lado superior derecho.

Saludos !