How to use CSS Top with it's parent element, rather than it's value relative to the document

Question

I'm making a single page website for a friend and I'm currently working on the about age. I have this design idea to have square divs to be layered on top of one another using different left/right/top/bottom values. But whenever I set the top or bottom values, their new position is relative to the entire document, rather than it's immediate parent div (.about-container). How can I make sure that the square divs and their top/bottom values are relative to their parent container, rather than the entire document?

html, body {
  	margin: 0;
  	padding: 0;
}

div {
	display: block;
}

nav ul, nav ol {
    list-style: none;
    list-style-image: none;
    margin: 0;
    padding: 0;
}

a {
	text-decoration: none;
	color: inherit; 
}

#body {
	visibility: visible;
	max-width: 1300px;
    margin: 5px auto;
}

#desktop-navbar {
	text-transform: uppercase;
	width: 100%;
	height: 60px;
	position: fixed;
	z-index:1;
}

#desktop-logo{
	float: left;
}

.logo {
	font-size: 42px;
	font-weight: 300;
	text-transform: uppercase;
	color: #ffffff;
	margin-top: 20px;
	font-family: Thasadith;
	font-weight: 700;
} 

#desktop-nav-wrapper {
	height: 90px;
	padding: 0 45px;
	margin-top: 0;
}

#desktop-nav-wrapper nav ul {
	float: right;
	padding-top: 35px;
	font-size: 16px;
}

#desktop-nav-wrapper nav li {
	position: relative;
	display: inline-block;
	padding-left: 35px;
	color: #ffffff;
	font-family: Thasadith;
	font-weight: 700;
}

#desktop-nav-wrapper, #mobile-nav-wrapper, #mobile-menu-link {
	font-weight: bold;
	font-size: 18px;
	text-transform: uppercase;
	color: black;
	letter-spacing: 2px;
}

#home {
	height: 700px;
	background-image: url("https://i.ibb.co/FzFVTMR/Whats-App-Image-2019-03-06-at-13-56-45.jpg");
	background-repeat: no-repeat;
	-webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

.container {
	display: flex;
  	justify-content: center;
  	align-items: center;
  	text-align: center;
  	min-height: 100vh;
}

#home-content {
	font-family: Thasadith;
	font-weight: 300;
	font-size: 38px;
	color: #ffffff;
	letter-spacing: 5px;
}

#about {
	height: 700px;
	background-color: #c96567;
}

.about-container {
	display: flex;
	position: absolute;
	height: inherit;
}

#about-div-one {
	height: 50px;
	width: 50px;
	background-color: red;
	left: 25%;
  top: 35%;
}

#about-div-two {
	height: 50px;
	width: 50px;
	background-color: blue;
	left: 75%; 
  top: 64%;
}

#about-div-three {
	height: 50px;
	width: 50px;
	background-color: orange;
	left: 74%; 
	top: 65%;
}

	<div id="home">
    	<div id="home-content" class="container">
    		<p>tatuando. dibujo. pintura. estilo de vida.</p>
    	</div>
	</div>
  
  	<div id="about">
		<div id="about-div-one" class="about-container">
			
		</div>
		<div id="about-div-two" class="about-container">
			
		</div>
		<div id="about-div-three" class="about-container">
			
		</div>
	</div>

Answer 1

The reason for this is that position:absolute positions a div depending on the next positioned (i.e. not static) ancestor - and because there are no non-static ancestors, it automatically defaults to position it based on the body.

If you want your three elements to be positioned based on the parent, the recommended course of action would be to assign a position:relative to the immediate parent (which would be the div with and id of about rather than .about-container (which is simply the class assigned to your three divs).

html, body {
  	margin: 0;
  	padding: 0;
}

div {
	display: block;
}

nav ul, nav ol {
    list-style: none;
    list-style-image: none;
    margin: 0;
    padding: 0;
}

a {
	text-decoration: none;
	color: inherit; 
}

#body {
	visibility: visible;
	max-width: 1300px;
    margin: 5px auto;
}

#desktop-navbar {
	text-transform: uppercase;
	width: 100%;
	height: 60px;
	position: fixed;
	z-index:1;
}

#desktop-logo{
	float: left;
}

.logo {
	font-size: 42px;
	font-weight: 300;
	text-transform: uppercase;
	color: #ffffff;
	margin-top: 20px;
	font-family: Thasadith;
	font-weight: 700;
} 

#desktop-nav-wrapper {
	height: 90px;
	padding: 0 45px;
	margin-top: 0;
}

#desktop-nav-wrapper nav ul {
	float: right;
	padding-top: 35px;
	font-size: 16px;
}

#desktop-nav-wrapper nav li {
	position: relative;
	display: inline-block;
	padding-left: 35px;
	color: #ffffff;
	font-family: Thasadith;
	font-weight: 700;
}

#desktop-nav-wrapper, #mobile-nav-wrapper, #mobile-menu-link {
	font-weight: bold;
	font-size: 18px;
	text-transform: uppercase;
	color: black;
	letter-spacing: 2px;
}

#home {
	height: 700px;
	background-image: url("https://i.ibb.co/FzFVTMR/Whats-App-Image-2019-03-06-at-13-56-45.jpg");
	background-repeat: no-repeat;
	-webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

.container {
	display: flex;
  	justify-content: center;
  	align-items: center;
  	text-align: center;
  	min-height: 100vh;
}

#home-content {
	font-family: Thasadith;
	font-weight: 300;
	font-size: 38px;
	color: #ffffff;
	letter-spacing: 5px;
}

#about {
	height: 700px;
	background-color: #c96567;
    position:relative;
}

.about-container {
	display: flex;
	position: absolute;
	height: inherit;
}

#about-div-one {
	height: 50px;
	width: 50px;
	background-color: red;
	left: 25%;
  top: 35%;
}

#about-div-two {
	height: 50px;
	width: 50px;
	background-color: blue;
	left: 75%; 
  top: 64%;
}

#about-div-three {
	height: 50px;
	width: 50px;
	background-color: orange;
	left: 74%; 
	top: 65%;
}

	<div id="home">
    	<div id="home-content" class="container">
    		<p>tatuando. dibujo. pintura. estilo de vida.</p>
    	</div>
	</div>
  
  	<div id="about">
		<div id="about-div-one" class="about-container">
			
		</div>
		<div id="about-div-two" class="about-container">
			
		</div>
		<div id="about-div-three" class="about-container">
			
		</div>
	</div>

Answer 2

Use relative position on #about to make elements in #about in absolute position, relative to #about and not the document.

html, body {
  	margin: 0;
  	padding: 0;
}

div {
	display: block;
}

nav ul, nav ol {
    list-style: none;
    list-style-image: none;
    margin: 0;
    padding: 0;
}

a {
	text-decoration: none;
	color: inherit; 
}

#body {
	visibility: visible;
	max-width: 1300px;
    margin: 5px auto;
}

#desktop-navbar {
	text-transform: uppercase;
	width: 100%;
	height: 60px;
	position: fixed;
	z-index:1;
}

#desktop-logo{
	float: left;
}

.logo {
	font-size: 42px;
	font-weight: 300;
	text-transform: uppercase;
	color: #ffffff;
	margin-top: 20px;
	font-family: Thasadith;
	font-weight: 700;
} 

#desktop-nav-wrapper {
	height: 90px;
	padding: 0 45px;
	margin-top: 0;
}

#desktop-nav-wrapper nav ul {
	float: right;
	padding-top: 35px;
	font-size: 16px;
}

#desktop-nav-wrapper nav li {
	position: relative;
	display: inline-block;
	padding-left: 35px;
	color: #ffffff;
	font-family: Thasadith;
	font-weight: 700;
}

#desktop-nav-wrapper, #mobile-nav-wrapper, #mobile-menu-link {
	font-weight: bold;
	font-size: 18px;
	text-transform: uppercase;
	color: black;
	letter-spacing: 2px;
}

#home {
	height: 700px;
	background-image: url("https://i.ibb.co/FzFVTMR/Whats-App-Image-2019-03-06-at-13-56-45.jpg");
	background-repeat: no-repeat;
	-webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

.container {
	display: flex;
  	justify-content: center;
  	align-items: center;
  	text-align: center;
  	min-height: 100vh;
}

#home-content {
	font-family: Thasadith;
	font-weight: 300;
	font-size: 38px;
	color: #ffffff;
	letter-spacing: 5px;
}

#about {
	height: 700px;
	background-color: #c96567;
    position: relative;
}

.about-container {
	display: flex;
	position: absolute;
	height: inherit;
}

#about-div-one {
	height: 50px;
	width: 50px;
	background-color: red;
	left: 25%;
  top: 35%;
}

#about-div-two {
	height: 50px;
	width: 50px;
	background-color: blue;
	left: 75%; 
  top: 64%;
}

#about-div-three {
	height: 50px;
	width: 50px;
	background-color: orange;
	left: 74%; 
	top: 65%;
}

	<div id="home">
    	<div id="home-content" class="container">
    		<p>tatuando. dibujo. pintura. estilo de vida.</p>
    	</div>
	</div>
  
  	<div id="about">
		<div id="about-div-one" class="about-container">
			
		</div>
		<div id="about-div-two" class="about-container">
			
		</div>
		<div id="about-div-three" class="about-container">
			
		</div>
	</div>