HTML/CSS position absolute for parent and children

Question

Convert the boxes into cocentric circles (circles within each other that share the same center). The outer circle should be black with a size of 300px and the inner circle should be white with a size of 200px.

html:

<div id="p10">
    <div id="outer">
        <div class="rectangle" id="inner"></div>
    </div>

css:

#p10 #outer {
    border-radius: 100%;
    background-color: #000;
    width: 300px;
    height: 300px;
    border-color: #000;
    position: absolute;
}

#p10 #inner {
    background-color: #fff;
    border-color: #fff;
    border-radius: 100%;
    width: 200px;
    height: 200px;

    margin: auto;
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;
}

The css works only if #p10 #outer position's absolute. I'm kind of confused on why this is so. Does this mean that any time I want a subelement position's to be absolute, all of the parent's positions must be absolute?

Answer 1

The position of a position:absolute element is relative to the closest container with which the position is set to either absolute, relative, or fixed, otherwise it is relative to the viewport.

It can also be relative to the initial containing block if none of the top, right, bottom, or left offset value was specified.

There could be more possibilities, you can learn more on W3C, and MDN.