html - 如何将 CSS Top 与其父元素一起使用，而不是它相对于文档的值

Question

我正在为一个 friend 制作一个单页网站，我目前正在为 about age 工作。我的设计理念是让正方形 divs 使用不同的 left/right/top 层叠在一起code>/bottom 值。但是每当我设置 top 或 bottom 值时，它们的新位置都是相对于整个文档的，而不是它的直接父 div (.about-container)。如何确保方形 div 及其 top/bottom 值是相对于它们的父容器而不是整个文档的？

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

使用 relative position在 #about在 #about 中制作元素在 absolute位置，relative至 #about而不是文档。

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>