Learn Intermediate CSS by Building a Cat Painting - Step 39

How does absolute positioning work?
this is the HTML code:

<body>
    <main>
      <div class="cat-head">
        <div class="cat-ears">
          <div class="cat-left-ear">
            <div class="cat-left-inner-ear"></div>
          </div>
          <div class="cat-right-ear">
            <div class="cat-right-inner-ear"></div>
          </div>
        </div>
      </div>
    </main>
</body>

And this is the CSS code:

.cat-left-inner-ear {
  position: absolute;
  top: 22px;
  left: -20px;
  border-top-left-radius: 90px;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 40%;
  border-bottom-left-radius: 40%;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-bottom: 40px solid #3b3b4f;
}
.cat-right-inner-ear {
  position: absolute;
  top: 22px;
  left: -20px;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-bottom: 40px solid #3b3b4f;
}

*All of the other div elements are also absolutely positioned
I thought that when an element is absolutely positioned it goes out of the regular page flow, so how is it that both of the inner ears are positioned the same way { top: 22px; left: -20px;} but still take different spaces in the page…

Absolutely positioned elements are removed from the normal document flow, but their final placement depends on their nearest positioned ancestor. Even though both .cat-left-inner-ear and .cat-right-inner-ear share the same top: 22px; left: -20px;, they appear in different places because they are positioned relative to different parent elements. If each inner ear is inside a separate parent, such as a left ear and a right ear container, their positioning values apply within those specific parents. This means their actual placement on the page is determined by where those parents are located.

1 Like