Search code examples
htmlcsscss-positionabsolute

Absolute positioning according to an indirect parent instead of direct parent

I am just working on a simple example to try to understand the behavior of absolute positioning elements. There is a case that I don't understand.

I have a container, with a card inside of it. I want to add a footer inside of this card, so I put another div inside of it, as follow : 

<body>
   <section id="experiences">
      <div class="experiences-cards-container">
         <div class="experience-card">
            <div class="card-footer"></div>
         </div>
      </div>
   </section>
</body>

As it is a footer, I want it to be displayed at the bottom of my card. That is the reason why I used absolute positioning to do so : 

.experience-card .card-footer {
  position: absolute;
  left: 0px;
  bottom: 0px;
  height: 70px;
  width: 100%;
  background-color: blue;
}

But it seems that the footer element does not get positioned according to its direct parent experience-card but to an indirect parent experiences-card-container, because I get the following result :

enter image description here

My question is : Why is the footer element positioned according to an indirect parent and not the card since it is a direct parent ?

Here is the full 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 {
    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;
}
Solution

  • Take out the quotation marks in position: "relative"; in the .experience-card class and it should work. By making it relative, it will become the context for the absolute positioning in the footer.