Aclarar z-index y text-indent

[GuNiTa]

Alguien podría aclararme bien la propiedad z-index, tengo alguna duda al respecto

Por ejemplo

objeto.style.z-index 50
objeto.style.z-index 100
objeto.style.z-index 0

También, dicho sea de paso, la propiedad text-indent

objeto.style.text-indent -1000
objeto.style.text-indent 0

Gracias!

[_Adrian_]

·z-index
·text-indent

Saludos

[cristian_cena]

Hola GuNiTa, este ejemplo es el mejor que encontre sobre el uso de z-index.

Aclaro que para que z-index funcione se deben cumplir las siguientes condiciones:

- Las capas que intervienen en el apilamiento deben ser hermanas entre si

Código HTML:

<!--ejemplo-->
<div id="papa">
<div class="hermanos" id="hijo1"></div>
<div class="hermanos" id="hijo2"></div>
</div> 

- Las capas que intervienen en el apilamiento deben estar posicionadas en relativo, absoluto o fijo

Código:

/*ejemplo:*/
.hermanos{position:absolute;}
#hijo1{z-index:0;}
#hijo2{z-index:999;}
/*#hijo2 se vera por delante de #hijo1*/

Espero te sirva, saludos.

[GuNiTa]

Muchas gracias a ambos

[GuNiTa]

Por cierto, para que sirve la #?

Yo siempre utilizo .

Gracias otra vez

[alexk]

Iniciado por GuNiTa

Por cierto, para que sirve la #?

Yo siempre utilizo .

Gracias otra vez

Es un selector de ID, para mas info
http://www.librosweb.es/css/capitulo...s_basicos.html

[Kurozaki]

Iniciado por GuNiTa

Por cierto, para que sirve la #?

Yo siempre utilizo .

Gracias otra vez

Siempre lo utilizas y no sabes para que sirve.

El ID se representa con el signo de numeros (#)
Las Class se representan con un punto (.)
También puedes poner objetos directos al CSS sin necesidad de ID o Class (se pone el nombre directo).

Ejemplos:

<div id="contenedor"></div>
En CSS lo pones:
#contenedor { ............ etc etc... .......... }

<div class="columna"></div>
en CSS lo pones:
.columna { ............ etc etc... .......... }

<table> contenido </table>
en CSS lo pones: (como mencione, directamente)
table { ............ etc etc... .......... }

Hasta luego, Kurozaki

[GuNiTa]

Ah, vale, ahora lo voy pillando, pero tengo una duda más concreta

Si pongo

.cabecera #registro{

....

}

¿Que quiere decir exactamente?

Por qué no poner:

.cabecera .registro{
....
}

Gracias!

[cristian_cena]

.cabecera #registro{

....

}

equivale a...

<etiqueta class="cabecera"><etiqueta id="registro"></etiqueta></etiqueta>



.cabecera .registro {
....
}

equivale a...

<etiqueta class="cabecera"><etiqueta class="registro"></etiqueta></etiqueta>

Saludos.

[PrendekZ]

@GuNiTa

.cabecera #registro{
....
}

Cuando tengas en html:

<div class="cabecera">
<div id=registro""></div> <!-- Aqui abro y cierro el div de registro -->
</div> <!-- Aqui cierro el div de cabecera -->

----------------------------------------

.cabecera .registro{
....
}

Cuando tengas en html:

<div class="cabecera">
<div class=registro""></div> <!-- Aqui abro y cierro el div de registro -->
</div> <!-- Aqui cierro el div de cabecera -->

[caricatos]

Hola:

Sobre el text-indent (que por cierto, por la sintaxis parece que te refieres a javascript, y en ese lenguaje es textIndent), en tu ejemplo:

objeto.style.text-indent = "-1000"; /* añadiendo cosillas */

sería igual a text-indent: "-1000 * 0";

...Lo que quiero decir es que deben ponerse las medidas.

Se trata de un estilo que tiene su intención en los párrafos, ya que valores negativos equivalen a párrafos con sangría francesa y con valores positivos "a la española"; y evidentemente deben complementarse con el estilo margin.

Fíjate que los párrafos normales (sin aplicarle estilos), al ser internet en un gran porcentaje "obra en inglés", no tienen ningún sangrado, y los márgenes distintos de cero (supongo que 1em), y es porque en inglés se "parrafea" así.

Supongo que un valor negativo tan alto debe traducirse como "ocultar la primera línea" (solo se trata de una opinión).

Saludos