html - 在绝对位置下方放置内容？

Question

我很想创建我的固定侧边栏的导航链接，但是在第一个 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>

提前致谢...

Answer 1

当您使用绝对 定位时，您应该考虑添加相同数量 (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>