CSS

Superponer divs en HTML usando CSS

En este tutorial aprenderemos a superponer divs en HTML usando CSS con posiciones absolutas. Las posiciones absolutas son indicadas con la propiedad position que ofrece CSS.

¿Cómo superponer divs en HTML usando CSS?

Para entender de forma fácil como hacer esta tarea vamos a realizar un ejemplo donde tenemos dos cuadrados de distintos colores superpuestos utilizando la propiedad position con el valor absolute. Una vez que usamos esta propiedad debemos indicar la posición de nuestro div con las propiedades top, right, bottom y left, además es importante saber que las etiquetas posicionadas de forma absoluta no toman como referencia su elemento contenedor div, sino la ventana del navegador.

<!DOCTYPE html>
<html>
  <head>
    <title>Superponer divs en HTML usando CSS</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	<style>
	  #cuadrado1{
	    background:red;
		width: 200px;
		height: 200px;
		position: absolute;
	  }
	  #cuadrado2{
	    background:blue;
		width: 200px;
		height: 200px;
		position:absolute;
		left: 15px;
		top:15px;
	  } 
	</style>
  </head>
  <body>
    <div id="cuadrado1">
	
    </div>
    <div id="cuadrado2">
	
    </div>
  </body>
</html>

Al visitar la página anterior el resultado sería el siguiente:

DIVS superpuestos con CSS

DIVS superpuestos con CSS

Es importante mencionar que esta misma técnica utilizada para superponer divs se puede utilizar con cualquier otra etiqueta, incluso con imágenes.

Bueno gente, hemos llegado al final de este sencillo tutorial para superponer divs en HTML usando CSS, espero que les sea de gran utilidad. Ante cualquier problema no duden en dejar un comentario.

Compartilo en
Share on FacebookTweet about this on TwitterShare on Google+Share on LinkedInPin on PinterestEmail this to someone

AboutJosé Di Meglio

Apasionado de la tecnología y programación. Aportando información gratuita sobre el mundo de la informática.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *