11.07.2015 Views

el tutorial de Dreamweaver

el tutorial de Dreamweaver

el tutorial de Dreamweaver

SHOW MORE
SHOW LESS

You also want an ePaper? Increase the reach of your titles

YUMPU automatically turns print PDFs into web optimized ePapers that Google loves.

Unidad 17. Estilos CSS Avanzado (XIV)17.14Controles <strong>de</strong> visibilidadPor último en este apartado veremos unas cuantas propieda<strong>de</strong>s que tienen que ver con la formaen la que se visualizan los <strong>el</strong>ementos en pantalla.La primera propiedad que veremos será z-in<strong>de</strong>x.Esta propiedad <strong>de</strong>ci<strong>de</strong> <strong>el</strong> or<strong>de</strong>n <strong>de</strong> profundidad <strong>de</strong> los <strong>el</strong>ementos que se encuentran solapados.En <strong>el</strong> apartado anterior vimos cómo mover los <strong>el</strong>ementos en la pantalla. Imagina, ahora, que almover dos capas una nos queda por encima <strong>de</strong> la otra.¿Cómo po<strong>de</strong>mos <strong>de</strong>cidir cuál quedará por <strong>de</strong>trás? ¿Y al frente?Utilizaremos esta propiedad para <strong>el</strong>lo.Z-in<strong>de</strong>x acepta números positivos o negativos, y establece que <strong>el</strong> <strong>el</strong>emento con un valormayor se mostrará por d<strong>el</strong>ante d<strong>el</strong> resto.Veamos un ejemplo:z-in<strong>de</strong>x: 0z-in<strong>de</strong>x: 2z-in<strong>de</strong>x: 1z-in<strong>de</strong>x: 2z-in<strong>de</strong>x: 0z-in<strong>de</strong>x: 1Para utilizar esta propiedad basta con <strong>de</strong>clararla:.rojo {position: r<strong>el</strong>ative;top: 100px;left: 20px;z-in<strong>de</strong>x: 0;}Otra propiedad muy valiosa a la hora <strong>de</strong> jugar con la visibilidad es visibility.Pue<strong>de</strong> tomar los valores visible y hid<strong>de</strong>n (visible y escondida respectivamente).

Hooray! Your file is uploaded and ready to be published.

Saved successfully!

Ooh no, something went wrong!