A bit of context I am at Responsive Web Design > Learn Intermediate CSS by Building a Cat Painting > Step 24
Why when setting " position: absolute; " to " cat-left-ear "changes the " cat-left-ear " from a rectangle ( almost one ) to a triangle?
I understand what position: " absolute; " does in itself but I don’t get how it changes the shape of the div.
Some clarification about what and why it happens would be nice.
Check out the screenshots below
Before " position: absolute; "
After " position: absolute; "
when you ask a question about a step of a project, please link to that step, thank you
div is removed from the flow of the document, so it changes what determines its width. With a position of absolute it doesn’t have a parent element to inherit the width from and it has width of 0.
if we inspect the page and take a look at the element we can see that before setting the position to absolute it has these dimensions
This is after
The thing to keep in mind, is that the colored part, what we see, is the border. And only the bottom one at that.
Le me also link a couple of articles on making shapes with CSS that could help to explain more.