La propiedad position CSS establece cómo se coloca un elemento en un documento. El posicionamiento absoluto le permite colocar su elemento donde desee. El posicionamiento se realiza en relación con el primer elemento absolutamente posicionado. El elemento que coloquemos como absoluto se eliminará del flujo normal del documento y no se creará ningún espacio en la página para el elemento.
Ahora, si tiene un botón y desea colocarlo en una nueva línea utilizando el posicionamiento absoluto. Haga que el elemento del botón sea absoluto y establezca el elemento principal como relativo (es relativo de forma predeterminada) y luego, usando arriba, izquierda, derecha, abajo, puede colocar su elemento donde desee.
Ejemplo: colocaremos dos botones dentro de un div y haremos que la posición del segundo div sea absoluta y luego, usando arriba y a la izquierda, lo colocaremos en una nueva línea. Cree un archivo index.html con el siguiente código.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
</head>
<style>
.box {
position: relative;
}
.btn-primary {
color: #fff;
padding: 0px 7% 0px 5px;
height: 45px;
display: inline-block;
cursor: pointer;
background-image: linear-gradient(green, lightgreen);
border: 1px solid #ccc;
}
.btn-text {
margin-top: 5px;
margin-bottom: 5px;
}
.btn-primary-2 {
position: absolute;
left: 0px;
top: 52px;
}
</style>
<body>
<div class="box">
<a class="btn-primary btn-primary-1">
<h5 class="btn-text">GFG</h5>
</a>
<a class="btn-primary btn-primary-2">
<h5 class="btn-text">GFG-2</h5>
</a>
</div>
</body>
</html>
Producción:
Producción
Publicación traducida automáticamente
Artículo escrito por anubhavb11 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA