Why is CSS positioned to grand ancestor and not immediate ancestor?

[uncut raptor]

Why is CSS positioned to grand ancestor and not immediate ancestor?

Context

I'm watching a MERN stack Udemy course and we are on CSS. we are building a little blog post but I'm getting stuck on one specific part.

Using Safari and tried chrome

Issue

The issue I am facing is that the button in the div alert is being put to the right of the div called container and not the right of the div called content. I glance back at the instructor's code but it seems identical.

I asked chatGPT and it said that when you use position: absolute it makes the position based on the ancestor which is the reason why I don't understand what is wrong cause the ancestor is content.

Code

https://codepen.io/marcysutton/pen/ZYqjPj

[thorn wagon]

<@&987246883653156906> please have a look, thanks.

[merry drift]

position: absolute is based of the nearest container thing. They are usually created by using position: relative. If you are sure that the code is the same then maybe you should try a different browser, the behaviour of css can sometimes vary, although it probably shouldn't here.