将内容置于绝对位置以下？

Question

我会创建固定侧边栏的导航链接，但是在第一个div上放置绝对位置之后。下一个内容dint属于第一个内容。有人可以帮忙解决这个问题吗？将文本（WELCOME）放在第一个div内容的下方？我试图使用合理的内容，但我失败了，

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

在使用absolute定位时，您应该考虑添加相同数量（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>