CSS DISPLAY AND POSITIONING Position: Absolute

https://www.codecademy.com/courses/learn-css/lessons/css-display-positioning/exercises/css-position-absolute

In the above image, I feel if offset properties were not declared for box-bottom, the image would not cover the box-top instead would be displayed below the box-top.

Am I going wrong somewhere? Why is it mentioned the opposite of my understanding in the lessons? Someone help me understand. Thank you in advance.

Hi @rkannapp
welcome to the forum!
The behaviour for the 2nd box would be as you expect if it wasn’t positioned absolute.
position: absolute; always positions an element relative to the next ancestor with position: relative; , independent of other elements inside that container. If no offset is defined, the default is top: 0; left: 0;.


Hi @mirja_t, in the above image red is box-bottom, and blue is box-top, when the red box is positioned absolute, it does not overlap blue. Why do this example and the above act differently? Thanks.

link: https://www.codecademy.com/paths/front-end-engineer-career-path/tracks/fecp-web-development-fundamentals/modules/fecp-learn-css-typography/lessons/learn-css-code-challenges/exercises/position-challenge

Could you post your html as well?

link: https://www.codecademy.com/paths/front-end-engineer-career-path/tracks/fecp-web-development-fundamentals/modules/fecp-learn-css-typography/lessons/learn-css-code-challenges/exercises/position-challenge

Ok I didn’t expect that behaviour either. Then I was wrong with the default left top positioning if no offset is defined. Obviously you do have to add left: 0; top: 0; in this case or position the other circle absolute as well.

Yeah, I have to add top:0 and left:0 for it to overlap. Now, I guess Idk why it is mentioned differently in the first image. Thank you, it was good to know someone’s understanding of this.