Cómo cambiar el orden de apilamiento de texto con Z-index

HTML permite piezas de una página web que se mostrará sólo en su llamado "flujo normal", en la que aparece cada elemento de la página inmediatamente después del elemento que le precede en el código de la página. Sin embargo, mediante la adición de hoja de estilo en cascada (CSS) reglas para una página HTML, los elementos individuales se pueden extraer del flujo normal y colocados en cualquier orden que el autor decida. El "z-index" propiedad CSS permite a los autores para apilar elementos seleccionados, incluidos bloques de texto, delante o detrás de la otra.

Instrucciones

1 Crear bloques de texto. elementos HTML deben crearse antes de que sus propiedades se pueden modificar a través de CSS. Para este ejemplo, crear tres bloques de texto de párrafo, copia y pega el siguiente código en su documento HTML:

<P> texto de nivel medio </ p>
<P> El fondo de texto de nivel </ p>
<P> texto de nivel superior </ p>

2 Apilar los elementos en la parte superior de uno al otro. La propiedad posicionamiento relativo de CSS le permite colocar los elementos relativos a su ubicación en el flujo normal del documento. Pila de los tres elementos de párrafo creados en el paso anterior por relativamente posicionamiento de ellos, utilizando el código que se muestra a continuación:

<P style = "position: relative"> texto de nivel medio </ p>
<P style = "position: relative; abajo: 30px; left: 10px"> texto de nivel inferior </ p>
<P style = "position: relative; abajo: 60px; left: 20px"> texto de nivel superior </ p>

A pesar de que la posición del primer elemento de párrafo no ha cambiado, es importante para establecer su valor de posición a "relativo". Sólo los elementos con una propiedad de posición que indique pueden tener su orden z-index cambió.

3 Cambiar el índice z de los bloques de texto. Añadir un valor de propiedad z-index para cada uno de los tres elementos de párrafo, como se muestra a continuación:

<P style = "position: relative; z-index: 2"> texto de nivel medio </ p>
<Style = "position: relative; abajo: 30px; left: 10px; z-index: 1" p> texto de nivel inferior </ p>
<Style = "position: relative; abajo: 60px; left: 20px; z-index: 3" p> texto de nivel superior </ p>

Guarde la página para confirmar los cambios.

4 Abra la página que acaba de editar en su navegador. Los valores de índice z afectan directamente orden de apilamiento, con elementos de valor de índice z superiores siempre aparecen antes de los elementos con valores más bajos. En este ejemplo, el bloque "Top texto de nivel" aparece en la parte superior, ya que su valor de índice z de 3 es más alta. El bloque "texto de nivel medio" viene detrás de él, mientras que el bloque "texto de nivel inferior" aparece como el nivel más bajo debido a su valor de índice z de 1.