La propiedad de posición de CSS se utiliza para establecer la posición del texto sobre una imagen. Esto se puede hacer encerrando la imagen y el texto en un «div» HTML. Luego haga que la posición de div sea «relativa» y la del texto «absoluta». Los elementos absolutos se colocan en relación con su padre (div). Las propiedades superior, derecha, inferior e izquierda de estos elementos especifican su ubicación desde el padre.
Ejemplo 1:
<!DOCTYPE html>
<html>
<head>
<style>
.gfg {
margin: 3%;
position: relative;
}
.first-txt {
position: absolute;
top: 17px;
left: 50px;
}
.second-txt {
position: absolute;
bottom: 20px;
left: 10px;
}
</style>
</head>
<body>
<div class="gfg">
<img src="gfg.png">
<h3 class="first-txt">
GeeksforGeeks
</h3>
<h3 class="second-txt">
A computer science portal
</h3>
</div>
</body>
</html>
Producción:
Ejemplo 2:
<!DOCTYPE html>
<html>
<head>
<style>
.gfg {
margin: 3%;
position: relative;
}
.first-txt {
position: absolute;
top: 17px;
left: 20px;
}
.second-txt {
position: absolute;
top: 17px;
left: 150px;
}
</style>
</head>
<body>
<div class="gfg">
<img src="gfg.png">
<h3 class="first-txt">Left</h3>
<h3 class="second-txt">Right</h3>
</div>
</body>
</html>
Producción:
HTML es la base de las páginas web, se utiliza para el desarrollo de páginas web mediante la estructuración de sitios web y aplicaciones web. Puede aprender HTML desde cero siguiendo este tutorial de HTML y ejemplos de HTML .
CSS es la base de las páginas web, se usa para el desarrollo de páginas web mediante el diseño de sitios web y aplicaciones web. Puede aprender CSS desde cero siguiendo este tutorial de CSS y ejemplos de CSS .
Publicación traducida automáticamente
Artículo escrito por riyakalra59 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA