我正在为一位朋友制作一个单页网站,我目前正在研究这个年龄段。我有这个设计理念,使用不同的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>
原因是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>
在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>