¿Cómo mover un DIV dentro de otro DIV en CSS?

Escrito por kevin lee | Traducido por pau epel
  • Comparte
  • Twittea
  • Comparte
  • Pin
  • E-mail
¿Cómo mover un DIV dentro de otro DIV en CSS?
Parte de la magia de navegar en la Internet proviene de la visualización de efectos especiales generados por los sitios web. (Comstock/Comstock/Getty Images)

Parte de la magia de navegar en la Internet proviene de la visualización de efectos especiales generados por los sitios web. Los desarrolladores construyen páginas web utilizando bloques de construcción; en el lenguaje HTML, estos bloques son llamados "div". Un div puede contener texto, imágenes, menús y otros elementos de HTML. Cuando una página muestra una barra lateral a la izquierda, el contenido en la mitad y una barra lateral a la derecha, probablemente consta de tres bloques div que le dan formato a este contenido. Al manipular los div, puedes mover uno dentro de otro y crear una amplia variedad de efectos útiles y entretenidos.

Nivel de dificultad:
Moderadamente fácil

Otras personas están leyendo

Instrucciones

  1. 1

    Ejecuta el Bloc de Notas o cualquier editor de HTML.

  2. 2

    Abre algún documento HTML y pega el siguiente código en cualquier parte de la sección "body" del documento:

    <div id="div1" class="green"> div 1 </div>

    <div id="div2" class="yellow"> div2 </div>

    <input id="Button1" type="button" value="Move Div" onclick="return moveDiv()" />

    Esto crea dos elementos div. El primer div, cuyo identificador es "div1", referencia a una clase CSS llamada "verde", mientras que el segundo div ("div2") se refiere a una clase llamada "amarilla". El botón en la última línea llama a la función de JavaScript "moveDiv" que mueve el primer div adentro del segundo.

  3. 3

    Pega este código en la sección "head" del documento:

    <style type="text/css"> .yellow {background-color:yellow;} .green {background-color:green; width:50px;} </style>

    Éstas son las clases "amarillo" y "verde" referenciadas por los elementos div. Cada una crea un color de fondo diferente para el contenedor div que la llama.

  4. 4

    Agrega el siguiente código de JavaScript debajo de la etiqueta "style" en tu documento:

    <script language="javascript" type="text/javascript">

    var divToMove = "div1"; var targetDiv = "div2";

    function moveDiv() { var div1 = document.getElementById(divToMove); var div2 = document.getElementById(targetDiv);

    div2.appendChild(div1); } </script>

    La función "moveDiv" obtiene una referencia al primer div y lo mueve al segundo div al ejecutar el método "appendChild". Este útil método de JavaScript te permite reposicionar elementos div y añadir nuevos elementos hijos a los ya existentes.

  5. 5

    Guarda tu documento HTML editado y visualízalo en un navegador web. Verás un pequeño div verde (div1) en la primera línea y un pequeño div amarillo (div2) en la segunda.

  6. 6

    Haz clic en el botón "MoveDiv". Cuando el código de JavaScript se ejecuta, mueve el primer div adentro del segundo. Debido a que los elementos div tienen diferentes colores, podrás notar que "div1" está dentro de "div2".

Consejos y advertencias

  • Este ejemplo establece los valores para "divToMove" y "targetDiv" al inicio del bloque de código JavaScript. Probablemente desees remover estas dos líneas de código y modificar la definición de función de modo que aparezca así: función moveDiv (divToMove, targetDiv). Esto permite que otras funciones en tu código llamen a la función y pasen estos dos parámetros.
  • Recuerda que los contenedores div pueden contener cualquier elemento HTML, incluyendo una imagen. Por ejemplo, puedes hacer que una imagen aparezca súbitamente dentro de un párrafo, simplemente moviendo el div de la imagen dentro del div que contiene el párrafo.

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