Search code examples
htmlcssposition

Why does my 'position: absolute' stick only to the first block?

I have a several-block webpage, where <section> tags represent blocks. I want a message to show at the bottom of the second block, but it keeps showing up at the bottom of the first one.

.block {
  height: 100vh;
  width: 100vw;
}

.secondBlock {
  background-color: #010c2d;
}

.sticky {
  position: absolute;
  left: 3em;
  bottom: 2em;
  /* or 2vh - it doesn't matter */
  font-size: 2.5vh;
  color: #ddd;
}

.left-wrapper {
  display: inline;
  float: left;
  padding-top: 2em;
  padding-left: 4em;
  padding-bottom: 0;
  width: 55vw;
}
</section>

<section class="block secondBlock">

  <div class="left-wrapper">
    <h1 class="heading aboutHeading">About me</h1>
    <p class="sticky">
      my projects &downarrow;
    </p>
  </div>

</section>

<section class="block thirdBlock">

What it shows me (black is the first block):

enter image description here

Though, when I use the same code for the first block, everything works fine. It shows the text where I want it to be. But when it comes to the second one, I get this problem.

Solution

  • Just to expand @motto 's solution, absolute positioned elements properties, like right, left, top and bottom are related to the first parent element with relative position property if it does not exists will refer to the document.

    So use position: relative on the parent element that you want to be the anchor for your absolute positioned element.