我很想创建我的固定侧边栏的导航链接,但是在第一个 div 上放置一个绝对位置之后。下一个内容力位于第一个内容之下。谁能帮忙解决这个问题?将文本(欢迎)放在第一个 div 内容的下方?我尝试使用 justify content 但我失败了,
html {
font-size: 10px;
}
body {
margin: 0;
padding: 0;
font-size: 1.6rem;
}
/* Custom Desingn
use rem instead of pixels */
.sideprofile {
/*position: absolute;*/
height: 100%;
width: 29rem;
position: fixed;
z-index: 1;
top: 0;
left: 0;
overflow: hidden;
background-color: #666;
}
.profileLogo {
position: absolute;
padding-top: .6rem;
top: 0;
left: 50%;
transform: translate(-50%, 0%);
box-sizing: border-box;
}
.profile {
width: 18rem;
height: 18rem;
border-radius: 50%;
border-style: solid;
border-width: 3px;
border-color: #FF5733 #3383FF #12AB86 #ABAB12;
box-sizing: border-box;
animation: profileAnimated 5s linear infinite;
background-color: #F1F3F3;
}
.welcome {
position: relative;
text-align: center;
}
/*Keyframes to animate*/
@keyframes profileAnimated {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
<link href="https://fonts.googleapis.com/css?family=Lato|Montserrat|Roboto" rel="stylesheet">
<div class="sideprofile">
<div class="profileLogo">
<div class="profile"></div>
</div>
<h1 class="welcome">WELCOME</h1>
</div>
提前致谢...
最佳答案
当您使用绝对
定位时,您应该考虑添加相同数量 (190px
) 的填充。
.sideprofile {
padding-top: 190px;
}
工作片段:
html {
font-size: 10px;
}
body {
margin: 0;
padding: 0;
font-size: 1.6rem;
}
.sideprofile {
height: 100%;
width: 29rem;
position: fixed;
z-index: 1;
top: 0;
left: 0;
overflow: hidden;
background-color: #666;
padding-top: 190px;
}
.profileLogo {
position: absolute;
padding-top: .6rem;
top: 0;
left: 50%;
transform: translate(-50%, 0%);
box-sizing: border-box;
}
.profile {
width: 18rem;
height: 18rem;
border-radius: 50%;
border-style: solid;
border-width: 3px;
border-color: #FF5733 #3383FF #12AB86 #ABAB12;
box-sizing: border-box;
animation: profileAnimated 5s linear infinite;
background-color: #F1F3F3;
}
.welcome {
position: relative;
text-align: center;
}
/*Keyframes to animate*/
@keyframes profileAnimated {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
<link href="https://fonts.googleapis.com/css?family=Lato|Montserrat|Roboto" rel="stylesheet">
<div class="sideprofile">
<div class="profileLogo">
<div class="profile"></div>
</div>
<h1 class="welcome">WELCOME</h1>
</div>
关于html - 在绝对位置下方放置内容?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50533834/