Que son las hojas de estilo (CSS) CSS y HTML Definición de estilos a nivel página Propiedades relacionadas a fuentes. Agrupación de varios elementos HTML con una misma regla de estilo Definición de varias reglas para un mismo elemento HTML Propiedades relacionadas al texto (color, text-align, text-decoration) Más propiedades relacionadas al texto (letter-spacing, word-spacing, text-indent, text-transform) Herencia de propiedades de estilo. Definición de un estilo en función del contexto. Definición de hojas de estilo en un archivo externo. Definición de estilos por medio de clases. Definición de estilos por medio de id. Propiedades relacionadas al borde de un elemento HTML (border-width, border-style, border-color) Más propiedades relacionadas al borde de un elemento HTML Propiedades relacionadas al padding de un elemento HTML Propiedades relacionadas al margen de un elemento HTML Propiedades relacionadas a listas Propiedades relacionadas al fondo (background) Propiedades relacionadas a fuentes Propiedades relacionadas al border Propiedades relacionadas al padding Propiedades relacionadas al margin Propiedades relacionadas al fondo (background) El selector universal * Pseudoclases Eliminacion subrayado de enlace Creación de un menú vertical Creación de un menú horizontal Propiedades relacionadas a la dimensión de un objeto en la página. Unidades de medida (px, rem, em, cm, mm etc.) Formas para indicar el color. Definir un cursor para un elemento HTML Aplicación de hojas de estilo a un formulario Definiendo reglas de estilo a una tabla. Posicionamiento relativo (position: relative) Posicionamiento absoluto (position: absolute) Posicionamiento absoluto y propiedad z-index Posicionamiento fijo (position: fixed) Disposición de 2 columnas (position: absolute) Propiedad float aplicada a una imagen Propiedades relacionadas a la dimensión de un objeto en la página Propiedad clear Disposición de 2 columnas (propiedad float) Disposición de 2 columnas, cabecera y pie Disposición de 3 columnas, cabecera y pie Diseño de ancho fijo Diseño de ancho líquido Selector de hijos Selector de hermano adyacente y hermano general Selector de atributo Pseudo-clases: first-child y last-child) Pseudo-clases: nth-child y nth-last-child Pseudo-clases: nth-of-type, nth-last-of-type, first-of-type y last-of-type Pseudo-clases: only-child y only-of-type Pseudo-clase: empty Pseudo-elementos: first-letter y first-line Pseudo-elementos: before y after CSS media queries Flexbox Flexbox - (flex-direction aplicada al contenedor) Flexbox - (justify-content aplicada al contenedor) Flexbox - (align-items aplicada al contenedor) Flexbox - (flex-wrap aplicada al contenedor) Flexbox - (align-content aplicada al contenedor) Flexbox - (flex-flow aplicada al contenedor) Flexbox - (flex-grow aplicada a los items) Flexbox - (flex-shrink aplicada a los items)o Flexbox - (flex-basis aplicada a los items) Flexbox - (flex aplicada a los items) Flexbox - (order aplicada a los items) Flexbox - (align-self aplicada a los items)

Posicionamiento absoluto y propiedad z-index

La propiedad z-index en CSS se utiliza para ordenar los elementos que se superpongan entre sí. Con la propiedad z-index podemos controlar qué elemento iría encima y cual debajo, como si el documento tuviera profundidad, tres dimensiones en lugar de dos.

Puede haber muchos motivos para que dos elementos se superpongan. Por ejemplo, ¿quién no se ha visto lidiando con elementos posicionados de forma absoluta y fija que se superponen con otros?

El orden z predeterminado

Antes de ver cómo utilizar z-index, vamos a repasar como se determina el orden z de elementos superpuestos.

El valor predeterminado de z-index es auto. El navegador irá ordenando los elementos en el orden en el que aparezcan, el primero quedará abajo y los siguientes elementos se irán apilando encima. Esta regla la aplica en este orden:

    Contextos de apilamiento

    Grupo de elementos con un padre común que se mueve hacia adelante y hacia atrás juntos en el orden del apilamiento, esto es lo que entendemos por contexto de apilamiento.
    Un contexto se forma de 3 maneras distintas.

      Niveles en contexto de apilamiento.

      Existen dentro de estos contextos siete niveles posibles de apilamiento.

        Cómo utilizar z-index y los contextos de apilamientoL


        Definición y uso

        La propiedad z-index especifica el orden de pila de un elemento. Un elemento con un orden de pila mayor siempre está delante de un elemento con un orden de pila menor. Nota: z-index solo funciona en elementos posicionados (posición: absoluta, posición: relativa, posición: fija o posición: fija).

        Valores de propiedad
        • auto Establece el orden de la pila igual a sus padres. Esto es predeterminado
        • number Establece el orden de pila del elemento. Se permiten números negativos
        • initial Establece esta propiedad en su valor predeterminado.
        • inherit Hereda esta propiedad de su elemento padre.

        Primero posiciona el elemento raíz <html>

        Luego los elementos no posicionados (cualquiera con el valor predeterminado position: static) Luego los elementos posicionados (cualquiera con position: relative, position: absolute, position: fixed, o cualquier otro valor diferente a position: static).

        Elemento raíz de HTML: Asigna a sus elementos hijos un lugar particular del orden, eso hace que si un elemento es contenido en un contexto de apilamiento en el más bajo orden no hay manera de que aparezca adelante. Cuando un elemento tiene una posición static y un valor de z-index distinto a auto. Un elemento tiene un valor de opacidad menor a 1. 

        Existen dentro de estos contextos siete niveles posibles de apilamiento.

        • Fondo y bordes. Es el nivel más bajo de la pila.
        • Z-Index Negativo.Contextos de elementos descendientes con z-index negativo.
        • Cajas de Nivel Bloque. Descienden en Flujo normal, No posicionados.
        • Cajas Flotantes. Flotantes no posicionados.
        • Cajas en línea. Descendientes en flujo, en línea no posicionados.
        • Z-index:0 Elementos posicionados.Estos forman nuevos contextos de apilamiento.
        • Z-Index Positivo.Elementos posicionados.El nivel más alto en la pila.

        Hemos visto que cuando disponemos uno o más elementos con la propiedad position con valor absolute los mismos salen del flujo del resto de elementos de la página.

        Ahora veamos que pasa si disponemos una serie de elementos con posición absoluta y se superponen. En esta situación debemos inicializar la propiedad z-index con un valor entero, el mismo indica cual tiene prioridad para visualizarse. El valor más grande indica cual tiene prioridad para visualizarse. Es decir que el navegador imprime los elementos con posición absoluta del valor más bajo al más alto.

        Mostrar tres div de color rojo, verde y azul con posiciones absolutas e indicando coordenadas que se superpongan. Inicializar la propiedad z-index de cada elemento de tal manera que quede más al frente el div de color verde, luego el azul y finalmente el rojo.

        <!DOCTYPE html>
        <html>
        <head>
        <title>Problema</title>
        <meta charset="UTF-8">
        <link rel="StyleSheet" href="estilos.css" type="text/css">
        </head>
        <body>
        <div id="caja1">
        <p>Esta es la primer caja.</p>
        </div>
        <div id="caja2">
        <p>Esta es la segunda caja.</p>
        </div>
        <div id="caja3">
        <p>Esta es la tercer caja.</p>
        </div>
        </body>
        </html>

        Definimos los tres div dentro de la página.

        Luego la hoja de estilo que debemos definir es:

        #caja1{
        position:absolute;
        background-color:red;
        left:10px;
        top:10px;
        width:200px;
        height:200px;
        z-index:1;
        }

        #caja2{
        position:absolute;
        background-color:green;
        left:50px;
        top:50px;
        width:200px;
        height:200px;
        z-index:3;
        }

        #caja3{
        position:absolute;
        background-color:blue;
        left:30px;
        top:30px;
        width:200px;
        height:200px;
        z-index:2;
        }
        z-index

        Hemos definido los tres div con la propiedad position con el valor absolute. Luego vemos que aquel que tiene color verde (green) le asignamos a la propiedad z-index un valor 3 (el número puede ser cualquiera siempre y cuando sea el mayor de los z-index asignado a los otros dos div)

        <!DOCTYPE html>
        <html>
        <head>
        <title>Problema</title>
        <meta charset="UTF-8">
        </head>
        <body>
        <body>
        <style>
        img {
        position: absolute;
        left: 0px;
        top: 0px;
        z-index: -1;
        }
        </style>
        </head>
        <body>
        <h1>Esto es el encabezado</h1>
        <img src="paisaje.jpg" width="100" height="140">
        <p>Porque la imagen tiene un z-index of -1, esta ubicado abajo del texto.</p>
        </body>
        </html>

        z-index

        <!DOCTYPE html>
        <html>
        <head>
        <title>Problema</title>
        <meta charset="UTF-8">
        </head>
        <body>
        <body>
        <style>
        img {
        position: absolute;
        left: 0px;
        top: 0px;
        z-index: 1;
        }
        </style>
        </head>
        <body>
        <h1>Esto es el encabezado</h1>
        <img src="paisaje.jpg" width="100" height="140">
        <p>Porque la imagen tiene un z-index of -1, esta ubicado abajo del texto.</p>
        </body>
        </html>

        z-index