Cómo hacer que un bloque de texto HTML aparezca al frente de otro

Escrito por sara williams | Traducido por john font
  • Comparte
  • Twittea
  • Comparte
  • Pin
  • E-mail
Cómo hacer que un bloque de texto HTML aparezca al frente de otro
Utiliza z-index para el posicionamiento de apilación de bloques de texto HTML. (Creatas Images/Creatas/Getty Images)

El código para las hojas de estilo de cascada permite posicionar elementos HTML de una página web. Una vez que se establezca la propiedad de la "posición" de un elemento, se puede mover hacia arriba o abajo y hacia la izquierda o hacia la derecha. También existe una propiedad para el orden de apilamiento para los elementos posicionados. Por ejemplo para mover un bloque de texto en HTML sobre otro, es necesario dar a cada bloque un tipo de posición con la propiedad z-index.

Nivel de dificultad:
Moderado

Otras personas están leyendo

Instrucciones

  1. 1

    Abre el archivo HTML en un editor de código o crea uno nuevo y coloca los dos bloques de texto. Es necesario utilizar etiquetas de apertura y de cierre en cada bloque de texto. La mayoría de etiquetas funcionan pero <span> y <li> necesitan código CSS extra posteriormente para mostrar los bloques. Asegúrate de que los dos bloques de texto sean adyacentes entre sí. Agrega una nueva línea encima de la primera sentencia y añade una etiqueta <div>. Cierra la etiqueta <div> agregando </div> después del segundo bloque de texto. Asigna a la etiqueta <div> al atributo "id". Al asignar a las etiquetas entre cada bloque de texto un atributo "ID", los bloques quedarían así:

    <div id="text-wrapper"> <div id="first">He aquí algunos ejemplos de texto.</div> <div id="second">He aquí más ejemplos de texto.</div> </div>

  2. 2

    Abre el archivo CSS o edita las etiquetas <style> y </ style> en tu archivo HTML. Si no utilizas un archivo CSS externo y no se encuentran presentes las etiquetas <style>, entonces agregalas entre las etiquetas <head> y </ head> en tu archivo HTML. En el código CSS, establece la posición del elemento <div> alrededor del elemento "relativo" de la siguiente manera:

    text-wrapper {position: relative;}

  3. 3

    Añade el posicionamiento absoluto para los dos elementos de bloque de texto. Una vez ajustada la posición absoluta, puedes especificar el número de píxeles ubicados desde la parte superior o inferior y desde la izquierda o la derecha. Debido a que al establecer las etiquetas <div> para el uso de la ubicación relativa, las posiciones solo serán absolutas dentro del espacio definido como relativo en la etiqueta <div>.

    first {position: absolute; top: 0px; left: 0px;}

    second {position: absolute; top: 5px; left: 5px;}

    En el ejemplo anterior, el primer bloque de texto llegará a su límite máximo exterior mientras que en el segundo bloque quedará un espacio de cinco pixeles en la parte superior y otros cinco en la margen izquierda.

  4. 4

    Asigna a cada bloque de texto un valor para la propiedad z-index con lo cual se indicará a los diferentes navegadores que un bloque se ubique sobre otro. El valor más bajo para la propiedad z-index es cero, mientras que el mayor es 9999, (no se debe incluir sentencias decimales). No agregues "px" o "em" a la propiedad z-index, ya que no hace falta identificarla como unidad de medida.

    first {position: absolute; top: 0px; left: 0px; z-index: 1;}

    second {position: absolute; top: 5px; left: 0px; z-index: 0;

    Con éste código se ubicará el segundo bloque de texto debajo del primero y éste a su vez conservará cinco pixeles por encima del segundo bloque y otros cinco pixeles de la derecha.

Consejos y advertencias

  • Utiliza el selector del evento :hover para cambiar la propiedad z-index de un elemento. Esto hará posible ubicar un elemento por encima de otro cuando un usuario desplace el ratón sobre una parte de la página web. El selector del evento :hover funciona en casi todos los navegadores excepto en Internet Explorer 6 que solo permite su utilización con la etiqueta .

No dejes de ver

Filtrar por:
  • Mostrar todos
  • Artículos
  • Galerías de fotos
  • Videos
Ordenar:
  • Más relevante
  • Más popular
  • Más reciente

No se encuentran artículos disponibles

No se encuentran slideshows disponibles

No se encuentran videos disponibles