Propiedad básica de CSS:
- position: La propiedad position especifica el tipo de método de posicionamiento utilizado para un elemento. Por ejemplo estático, relativo, absoluto y fijo.
- bottom: La propiedad bottom afecta la posición vertical de un elemento posicionado. Esta propiedad no tiene efecto en elementos no posicionados.
- izquierda: La propiedad izquierda afecta la posición horizontal de un elemento posicionado. Esta propiedad no tiene efecto en elementos no posicionados.
- right: La propiedad right afecta la posición horizontal de un elemento posicionado. Esta propiedad no tiene efecto en elementos no posicionados.
Sobre la base del valor de la propiedad de posición, se establece el valor de la otra propiedad. Aquí hay algunos ejemplos que usan estas propiedades.
Ejemplo: Cambio de botón a la esquina inferior izquierda del elemento div.
html
<!DOCTYPE html>
<html>
<head>
<title>align content to div</title>
<style>
.main {
border: 1px solid green;
float: left;
min-height: 180px;
margin: 2px;
padding: 10px;
min-width: 117px;
position: relative;
}
.gfg {
font-size: 40px;
color: green;
font-weight: bold;
tect-align: center
}
.geeks {
text-align: center;
}
#bottom {
position: absolute;
bottom: 0;
left: 0;
}
</style>
</head>
<body>
<div class="main">
<div class="gfg">GeeksforGeeks</div>
<div class="geeks">
A computer science portal for geeks
</div>
<div id="bottom">Bottom Content Div</div>
</div>
</body>
</html>
Producción:
Ejemplo: Cambio de botón a la esquina inferior derecha del elemento div.
html
<!DOCTYPE html>
<!DOCTYPE html>
<html>
<head>
<title>align content to div</title>
<style>
.main {
border: 1px solid green;
float: left;
min-height: 180px;
margin: 2px;
padding: 10px;
min-width: 117px;
position: relative;
}
.gfg {
font-size: 40px;
color: green;
font-weight: bold;
tect-align: center
}
.geeks {
text-align: center;
}
#bottom {
position: absolute;
bottom: 0;
right: 0;
}
</style>
</head>
<body>
<div class="main">
<div class="gfg">GeeksforGeeks</div>
<div class="geeks">
A computer science portal for geeks
</div>
<div id="bottom">Bottom Content Div</div>
</div>
</body>
</html>
Producción:
CSS es la base de las páginas web, se utiliza 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 kundankumarjha y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA