Qs about position:relative and absolute

HTML-CSS
1

Tell us what’s happening:
I tried this code away from FCC on chrome, If I don’t put position:relatve in the parent container, The browser does not default to body as mentioned in the lesson but to the viewport. The offset are then relative to the viewport.
Am I doing something wrong or have I understood the lesson wrong? Please advise if you can.

Your code so far


<style>
     border: 2px solid black;
	/*position: relative;*/
	width:700px;
	height:300px;
	margin-top:200px;
}
#red-circle{
	border: 50px solid red;
	width:50px;
	height:50px;
	border-radius: 50%;
	position: absolute;
	top:355px;
	left:30px;
}

#blue-circle{
	border: 1px solid blue;
	background-color: blue;
	width:50px;
	height:50px;
	border-radius: 50%;
	position:absolute;
	top: 302px;
	left:75px;
}
</style>
<body>
      <div id="red-circle"></div>
     <div id="blue-circle"></div>
 </body>

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/80.0.3987.163 Safari/537.36.

Challenge: Lock an Element to its Parent with Absolute Positioning

Link to the challenge:

2 
     border: 2px solid black;
	/*position: relative;*/
	width:700px;
	height:300px;
	margin-top:200px;
}

I don't think this is applied anywhere.  See your brackets.
3

Thanks for the reply.
As per the lesson on FCC
“One nuance with absolute positioning is that it will be locked relative to its closest positioned ancestor. If you forget to add a position rule to the parent item, (this is typically done using position: relative; ), the browser will keep looking up the chain and ultimately default to the body tag.”

So even if I comment it in body, it is supposed to default to body.
That’s my confusion that it is defaulting to the viewport and not the body.

4

I see your confusion, what I am saying is that you have a closing bracket there with no opening bracket. That style is not actually applied to anything. See your #red-circle class. It has opening and closing brackets. For instance, --> width:700px; Ok, what do you want to be 700px? Your ?

5

oh sorry, Thats a mistake in copying. My original code has
body{
border: 2px solid black;
/position: relative;/
width:700px;
height:300px;
margin-top:200px;
}

6

Do you started to count every pixel in your monitor? how do you calculate or estimate stuff’s like that ? can someone explain to me how many pixel in my sony vaio laptop?

7

I dont count the pixels. I dont know how many pixels in my laptop. I start with a random number and see the result and change accordingly.