Para crear páginas web atractivas y únicas, eventualmente se requiere agregar un elemento sobre otro, completo o solo una parte del mismo. Hay dos métodos para lograr esto.
- Usando la propiedad de posición CSS.
- Uso de cuadrículas CSS.
Uso de la propiedad de posición CSS: la position: absolute;propiedad se usa para colocar cualquier elemento en la posición absoluta y esta propiedad se puede usar para apilar elementos uno encima del otro. Con esto, cualquier elemento se puede colocar en cualquier lugar, independientemente de la posición de otros elementos.
Ejemplo 1:
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: "Times New Roman", sans-serif;
background: green;
color: black;
text-align: center;
}
h2 {
font-weight: bold;
padding: 0 10px;
margin-bottom: 10px;
}
.parentClass {
background: cyan;
width: 80vw;
margin: 8vw 10vw;
height: 210px;
}
.firstchild {
top: 0;
left: 0;
}
.secondchild {
top: 0;
right: 0;
}
.childClass {
position: absolute;
opacity: 0.6;
height: 150px;
background: yellow;
width: 200px;
}
</style>
</head>
<body>
<div class="parentClass">
<h2>I am Parent</h2>
<div class="childClass firstchild">
<h2>First Child </h2>
</div>
<div class="childClass secondchild">
<h2>Second Child </h2>
</div>
</div>
</body>
</html>
Producción:
Para crear un componente independiente que se pueda usar en varios lugares, necesita un contenedor dentro de otro contenedor, de modo que el contenedor principal cambie relativamente según el elemento secundario, puede usarlo position: relative;en el elemento principal y position: absolute;en los elementos secundarios.
Ejemplo 2:
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: "Times New Roman", sans-serif;
background: green;
color: black;
text-align: center;
}
h2 {
font-weight: bold;
padding: 0 20px;
margin-bottom: 15px;
}
p {
padding: 15px 10px;
}
.parentClass {
position: relative;
background: cyan;
width: 80vw;
margin: 8vw 10vw;
height: 200px;
}
.childClass {
top: 0;
left: 0;
opacity: 0.7;
width: 200px;
height: 150px;
background: yellow;
position: absolute;
}
</style>
</head>
<body>
<div class="parentClass">
<h2>Element 1</h2>
<div class="childClass">
<h2>Element 2</h2>
<p>position: absolute;</p><br>
</div>
</div>
</body>
</html>
Producción:
Ejemplo 3: la misma implementación también se puede usar para tener dos elementos apilados encima del elemento principal.
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: "Times New Roman", sans-serif;
background: green;
color: black;
text-align: center;
}
h2 {
font-weight: bold;
padding: 10 20px;
margin-bottom: 15px;
}
p {
padding: 10px 10px;
}
.parentClass {
position: relative;
background: cyan;
width: 80vw;
margin: 8vw 10vw;
height: 200px;
}
.childClass {
opacity: 0.8;
height: 150px;
width: 190px;
background: yellow;
position: absolute;
top: 0;
}
.child1 {
left: 0;
}
.child2 {
left: 155px;
}
</style>
</head>
<body>
<div class="parentClass">
<h2>Element 1</h2>
<code>position: relative;</code>
<div class="childClass child1">
<h2>Element 1.1</h2>
<p>position: absolute;</p><br>
</div>
<div class="childClass child2">
<h2>Element 1.2</h2>
<p>position: absolute;</p>
</div>
</div>
</body>
</html>
Producción:
Uso de cuadrículas CSS: otra forma de apilar elementos es usar cuadrículas CSS. Las rejillas se pueden utilizar para colocar elementos donde sea necesario. Use el siguiente código para hacer un apilamiento simple de un elemento encima del otro.
.parentClass {
grid-template-rows: 150px 1fr;
grid-template-columns: 250px 1fr;
display: grid;
}
.childClass {
grid-area: 1 / 1 / 2 / 2;
}
Código completo:
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: "Times New Roman", sans-serif;
background: green;
color: black;
text-align: center;
}
h1 {
color: black;
font-weight: bold;
}
h2 {
color: grey;
font-weight: bold;
padding: 25px 15px 20px;
margin-bottom: 15px;
}
p {
padding: 5px 10px;
}
.parentClass {
position: relative;
background: cyan;
width: 80vw;
margin: 8vw 10vw;
height: 200px;
}
.childClass {
opacity: 0.8;
height: 150px;
width: 190px;
background: yellow;
position: absolute;
top: 0;
}
.child1 {
left: 0;
}
.child2 {
left: 155px;
}
.parentClass {
display: grid;
grid-template-rows: 150px 1fr;
grid-template-columns: 250px 1fr;
}
.childClass {
grid-area: 1 / 1 / 2 / 2;
}
</style>
</head>
<body>
<div class="parentClass">
<h1>Element 1</h1>
<div class="childClass child1">
<h2>Element 1.1</h2>
<p>position: absolute;</p><br>
</div>
<div class="childClass child2">
<h2>Element 1.2</h2>
<p>position: absolute;</p>
</div>
</div>
</body>
</html>
Producción:
Si se necesita apilar un elemento secundario sobre el otro y ambos sobre el elemento principal.
.parentClass {
display: grid;
grid-template-columns: 250px 1fr;
grid-template-rows: 150px 1fr;
}
.childClass {
grid-area: 1 / 1 / 2 / 2;
}
.child-2 {
margin-left: 200px;
}
Ejemplo de código completo:
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: "Times New Roman", sans-serif;
background: green;
color: black;
text-align: center;
}
h2 {
font-weight: bold;
padding: 10 10px;
margin-bottom: 5px;
}
.parentClass {
display: grid;
grid-template-columns: 250px 1fr;
grid-template-rows: 150px 1fr;
background: cyan;
width: 80vw;
margin: 8vw 10vw;
height: 200px;
}
.childClass {
grid-area: 1/1/2/2;
opacity: 0.7;
height: 150px;
width: 250px;
background: yellow;
}
.child2 {
margin-left: 200px;
}
</style>
</head>
<body>
<div class="parentClass">
<h2>Element 1<br>
</h2>
<div class="childClass">
<h2>Element 2.1</h2>
</div>
<div class="childClass child2">
<h2>Element 2.2</h2>
</div>
</div>
</body>
</html>
Producción: