Why when setting " position: absolute; " to " cat-left-ear "changes the " cat-left-ear " from a rectangle ( almost one ) to a triangle?

HTML-CSS
1

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.

Thanks :wink:

Check out the screenshots below

Before " position: absolute; "

image
image1142×644 6.57 KB

After " position: absolute; "

image
image1066×590 15.1 KB

1 Like
2

when you ask a question about a step of a project, please link to that step, thank you

the 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
image

This is after
image

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.

2 Likes
3

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.