如何将CSS Top与父元素结合使用，而不是其相对于文档的价值

时间：2019-03-08 13:40:22

标签： html css

我正在为一个朋友制作一个单页网站，而我目前正从事大约年龄的工作。我的设计思路是使用不同的divs / left / right / top值使正方形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>

2 个答案:

答案 0 :(得分：2)

在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>

答案 1 :(得分：0)

这样做的原因是position:absolute根据下一个定位的（即非静态）祖先来定位div-并且因为没有非静态的祖先，所以它会默认默认基于在身体上。

如果要基于父级放置三个元素，建议的操作步骤是将position:relative分配给直接父级（将是div和id的about而不是.about-container（这只是分配给您的三个div的类）。

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>

相关问题
最新问题