如何使用CSS Top与它的父元素,而不是它相对于文档的值

问题描述 投票:0回答:2

我正在为一位朋友制作一个单页网站,我目前正在研究这个年龄段。我有这个设计理念,使用不同的divs / left / right / top值将方形bottom叠加在一起。但每当我设置topbottom值时,他们的新位置都是相对于整个文档,而不是它的直接父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>
html css
2个回答
0
投票

原因是position:absolute根据下一个定位(即非静态)祖先定位div - 并且因为没有非静态祖先,它会自动默认根据身体定位它。

如果你想要根据父元素定位你的三个元素,推荐的行动方案是将position:relative分配给直接父母(这将是id的q和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>

2
投票

relative position上使用#about#about位置absoluterelative#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>
© www.soinside.com 2019 - 2024. All rights reserved.