En la presente ocasión vamos a ver cómo superponer etiquetas y tags HTML con CSS. Esto mismo puede servir para manipular cualquier elemento HTML, por ejemplo botones, enlaces, todos los input y tags div entre otros. Para que puedas comprender correctamente todos los pasos necesarios para realizar dicha función, te vamos a proporcionar el código completo.
Esto puede ser necesario en muchas ocasiones, por ejemplo cuando se requiere mostrar un texto o un botón por encima de una imagen o cualquier otro elemento del doc.
Código para superponer etiquetas y tags HTML con CSS usando posiciones relativa y absoluta
Para comprender mejor el código a continuación vamos a definir dos etiquetas div HTML, una dentro de otra, para que la segunda se puede posicionar por encima de la primera, en cualquier ubicación. Para esto la primera va a tener que tener el atributo position como relative mientras que la segunda va a tener que tener ese mismo atributo pero con el valor absolute, luego con el bottom y el right se va a poder posicionar en cualquier ubicación.
<html> <head> <title>Superponer etiquetas y tags HTML con CSS</title> <style type="text/css"> .tag1{ width: 300px; height: 300px; position: relative; background: red; } .tag2{ width: 100px; height: 50px; position: absolute; bottom: 5px; right: 5px; background: yellow; } </style> </head> <body> <div class="tag1"> <div class="tag2"></div> </div> </body></html>Con el código anterior la segunda etiqueta se va a mostrar en la parte inferior izquierda de la primera, en caso de querer ubicarla sobre el margen superior simplemente hay que utilizar el atributo top en lugar del bottom, como se utilizó en el ejemplo anterior.
Así es como se verá el código anterior en tu navegador.
Si te interesa superponer el segundo tag sobre una imagen, simplemente se puede realizar agregando la etiqueta img de la imagen en el primer tag.
Eso es todo lo que hay que tener en cuenta para poder realizar la función de superponer etiquetas HTML con CSS. En caso de que tengan alguna duda pueden dejar su comentario al final del post.
