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:

enter image description here

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;
}
0
souki 16 oct. 2019 a las 00:08

3 respuestas

La mejor respuesta

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.

2
Henrique Erzinger 15 oct. 2019 a las 21:13

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>
0
Piyush Teraiya 16 oct. 2019 a las 06:49

Puedes probar esto:

.experiences-cards-container {
   position: relative;
   width: 100%;
   max-width: 1200px;
   /* height: calc(100% - 100px); */
   text-align: center;
   margin: auto;
}
0
Dino 16 oct. 2019 a las 10:28
58402669