Solo estoy trabajando en un ejemplo simple para tratar de comprender el comportamiento de los elementos de posicionamiento absoluto. Hay un caso que no entiendo.
Tengo un contenedor, con una tarjeta dentro. Quiero agregar un pie de página dentro de esta tarjeta, así que puse otro div dentro de ella, como sigue:
<body>
<section id="experiences">
<div class="experiences-cards-container">
<div class="experience-card">
<div class="card-footer"></div>
</div>
</div>
</section>
</body>
Como es un pie de página, quiero que se muestre en la parte inferior de mi tarjeta. Esa es la razón por la que utilicé el posicionamiento absoluto para hacerlo:
.experience-card .card-footer {
position: absolute;
left: 0px;
bottom: 0px;
height: 70px;
width: 100%;
background-color: blue;
}
Pero parece que el elemento de pie de página no se posiciona de acuerdo con su padre directo experience-card sino con un padre indirecto experiences-card-container, porque obtengo el siguiente resultado:
Mi pregunta es: ¿Por qué el elemento de pie de página se coloca de acuerdo con un padre indirecto y no con la tarjeta, ya que es un padre directo?
Aquí está el CSS completo:
html, body
{
height: 100%;
}
#experiences {
height: 100%;
background-color: #ECECEC;
}
.experiences-cards-container {
position: relative;
width: 100%;
max-width: 1200px;
height: calc(100% - 100px);
text-align: center;
margin: auto;
}
.experience-card {
position: "relative";
display: inline-block;
width: 280px;
height: 350px;
background-color: white;
margin-right: 20px;
box-shadow: 0px 0px 6px 0px #949494;
margin-bottom: 20px;
text-align: left;
}
.experience-card .card-body {
padding-left: 10px;
padding-right: 10px;
}
.experience-card .card-footer {
position: absolute;
left: 0px;
bottom: 0px;
height: 70px;
width: 100%;
background-color: blue;
}
3 respuestas
Elimine las comillas en position: "relative"; en la clase .experience-card y debería funcionar. Al hacerlo relativo, se convertirá en el contexto para el posicionamiento absoluto en el pie de página.
Puedes usar este código
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title>Hello, world!</title>
<style type="text/css">
html,
body {
height: 100%;
}
#experiences {
height: 100%;
background-color: #ECECEC;
}
.experiences-cards-container {
position: relative;
width: 100%;
max-width: 1200px;
height: calc(100% - 100px);
text-align: center;
margin: auto;
}
.experience-card {
display: inline-block;
width: 280px;
height: 350px;
background-color: white;
margin-right: 20px;
box-shadow: 0px 0px 6px 0px #949494;
margin-bottom: 20px;
text-align: left;
position: relative;
}
.experience-card .card-body {
padding-left: 10px;
padding-right: 10px;
}
.experience-card .card-footer {
position: absolute;
left: 0px;
bottom: 0px;
height: 70px;
width: 100%;
background-color: blue;
right: 0;
}
</style>
</head>
<body>
<section id="experiences">
<div class="experiences-cards-container">
<div class="experience-card">
<div class="card-footer"></div>
</div>
</div>
</section>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>Puedes probar esto:
.experiences-cards-container {
position: relative;
width: 100%;
max-width: 1200px;
/* height: calc(100% - 100px); */
text-align: center;
margin: auto;
}