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…