-
Cómo hacer un bloque de texto HTML aparecen en frente de otro
-
Cascading Style Sheet código hace que sea posible posicionar elementos HTML de una página Web. Una vez que se establece la propiedad "posición" de un elemento, puede mover el elemento a la parte superior o inferior y de la izquierda o hacia la derecha. También existe una propiedad orden de apilamiento - el índice z - para los elementos posicionados. Para mover un bloque de texto HTML sobre otro, por ejemplo, es necesario dar a cada bloque de un tipo de posición y z-index.Instrucciones
1 Abre el archivo HTML en un editor de código o crear uno nuevo y coloque sus dos bloques de texto. Es necesario un conjunto de etiquetas de envolver alrededor de cada bloque de texto. La mayoría de las etiquetas funcionan, pero <span> y <li> necesitan un código CSS adicional más adelante así que mostrarán como bloques. Asegúrese de que ambos de sus bloques de texto son adyacentes entre sí. Añadir una nueva línea por encima de la primera secuencia y añadir una etiqueta <div>. Cerrar el <div> añadiendo </ div> debajo del segundo bloque de texto. Dar el atributo <div> "ID". Dar la envoltura alrededor de las etiquetas de cada texto bloquear un atributo "id" también. Sus dos bloques podría tener este aspecto:
<Div id = "text-wrapper">
<Div id = "primera"> Aquí hay alguna muestra de texto. </ Div>
<Div id = "segundo"> Aquí hay algo más de texto de ejemplo. </ Div>
</ Div>
2 Abra su archivo CSS o encontrar el <style> y </ style> en el archivo HTML. Si no se utiliza un archivo CSS externo y no hay <style>, añadirlos entre <head> y </ head> en el archivo HTML. En el código CSS, establecer la posición de la envoltura <div> para "relativo" de esta manera:
texto-wrapper {position: relative;}
3 Añadir posicionamiento absoluto para ambos de sus elementos de bloque de texto. Una vez ajustada la posición de absoluta, puede especificar el número de píxeles a la parte superior o inferior ya la izquierda o hacia la derecha. Dado que se establece la envoltura <div> para utilizar el posicionamiento relativo, sus posiciones absolutas son solamente absoluta en el espacio con posición relativa de ese <div>.primera {position: absolute; top: 0px; left: 0px;} {segunda position: absolute; top: 5px; izquierda: 5px;}
En el ejemplo anterior, el primer bloque de texto llegará a su máximo a cabo detrás del segundo bloque de cinco píxeles en la parte superior y cinco píxeles a la izquierda.4 Dé a cada bloque de texto un valor z-index para contar los navegadores para mostrar una sobre la otra. El valor más bajo para un índice z es cero, mientras que el más alto es 9999 (no incluya una coma). No agregue "px" o "em" para el índice z, ya que no tiene una unidad de medida.
primera {position: absolute; top: 0px; left: 0px; z-index: 1;} {segunda position: absolute; top: 5px; left: 0px; z-index: 0;}
Este código se coloca el segundo bloque de texto debajo del primero, y luego el primer bloque de texto será de cinco píxeles por encima de la segunda y cinco píxeles a la derecha.Consejos y advertencias
- Utilice el: hover pseudo-selector para cambiar z-index de un elemento. Esto hará que sea posible hacer una subida por encima de otro elemento cuando el usuario pasa el ratón sobre una parte de la página web. El: coloque el selector de pseudo-obras en todos los navegadores excepto Internet Explorer 6, que sólo permite su uso en etiquetas <a>.
