HTML/CSS position absolute for parent and children - html

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.

Answer 2

just change the position relative of parent div
#p10 #outer {
border-radius: 100%;
background-color: #000;
width: 300px;
height: 300px;
border-color: #000;
position: relative;
}

Answer 3

I would suggest to use position:absolute for the outer and position:relative for the inner. Then, set the border-radius property at half the width in pixels. Percentage in border-radius could cause some problems. Naturally you need to center the inner, so give it these properties.
#inner {
top:0;
bottom:0;
left:0;
right:0;
margin:auto;
position:relative;
width:200px;
border-radius:100px;
}

Answer 4

Absolute/relative might not be neede here , at least relative for inner content.
you can also relay on padding and mind box-sizing:
#p10 #outer {
border-radius: 100%;
background-color: #000;
width: 200px;
height: 200px;
padding:50px;
border-color: #000;
/*position: absolute;*//* did you need it ? it will work the same for the child; */
box-sizing:content-box; /*make sure padding is not included in size calculation*/
}
#p10 #inner {
background-color: #fff;
border-color: #fff;
border-radius: 100%;
width: 200px;
height: 200px;
}
<div id="p10">
<div id="outer">
<div class="rectangle" id="inner"></div>
</div>
you can also relay on marging and mind collapsing margins:
#p10 #outer {
border-radius: 100%;
background-color: #000;
width: 300px;
height: 300px;
border-color: #000;
/*position: absolute;*//* did you need it ? it will work the same for the child; */
padding:1px; /* mind [collapsing margins][1] */
}
#p10 #inner {
background-color: #fff;
border-color: #fff;
border-radius: 100%;
width: 200px;
height: 200px;
margin:50px;
}
<div id="p10">
<div id="outer">
<div class="rectangle" id="inner"></div>
</div>
You may also use flex :
#p10 #outer {
border-radius: 100%;
background-color: #000;
width: 300px;
height: 300px;
display:flex;
align-items:center;
justify-content:center;
border-color: #000;
/*position: absolute;*//* did you need it ? it will work the same for the child; */
}
#p10 #inner {
background-color: #fff;
border-color: #fff;
border-radius: 100%;
width: 200px;
height: 200px;
}
<div id="p10">
<div id="outer">
<div class="rectangle" id="inner"></div>
</div>
You can also use a single box
.circle {
/* diplay, float, position, .. whatever is needed to be inserted mong the rest of your document styles*/
margin:55px;
height:200px;
width:200px;
border:solid;
box-shadow:0 0 0 50px gray, 0 0 0 53px;
border-radius:50%;
<div class="circle"></div>