Blog
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:
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.