Css 如何避免这些重叠元素

我在codepen上玩一些自制的代码，试图适应html/css，因为我在定位上不是很舒服。这一定很傻，但我不能让它工作

HTML:

}

之后还有一些关于悬停等的无关代码。 结果是：

所以我想把h1放在中间，我在这里找到了把hh绝对值放在左边的方法：50%，然后把h1相对值放在左边：-50%。它把定位搞砸了

我想要的是h1在中间顶部，然后4在它下面不是中心，只是不重叠。

在一个元素上放置position:absolute会使所有其他元素忽略它。这可以通过将display:inline块放在h1上，将text align:center放在hh:

检查新笔：

---

内联块使元素的框适应其文本的宽度。我假设标题的期望外观是蓝色框的宽度不是100%，h1和其他块元素的情况就是如此。

我在css中做了以下修改，它按预期工作：

#hh{
  text-align: center;
  margin-left:auto;
  margin-right:auto;
  width:40%;
}

h1{
  font: 300 3em/1em 'Open Sans', sans-serif;
  border: solid 0.00019em #000;
  margin-bottom: 0.2em;
  padding: 0.4em 0.2em 0.4em 0.2em;
  background-color:lightblue;
  border-radius:0.2em;
}

top不是position属性的有效值。

*, :before, :after{ @include box-sizing('border-box'); }
body{ padding: 1em; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; background: #eee; }

#hh{
   position:absolute; 
   left:50%
   }

h1{
  position:relative;
  left:-50%;
  font: 300 3em/1em 'Open Sans', sans-serif;
  border: solid 0.00019em #000;
  margin-bottom: 0.2em;
  padding: 0.4em 0.2em 0.4em 0.2em;
  background-color:lightblue;
  border-radius:0.2em;
  }
#cl{
   clear:both;
 }

.button,
 [class*="button-"]{

  position: relative;
  display: inline-block;
  overflow: hidden;
  float:left;
  margin: 0 1em 1em 0;
  padding: 0 4em;
  height: 3.5em;
  font: 300 1em/3.5em 'Open Sans', sans-serif;
  text:{
    decoration: none;
    shadow: 0 1px 3px rgba(black, .35);
   }
  letter-spacing: .08em;
  color: #fff;
  background: #0090C0;
  border: solid 1px #fff;
  border-radius: 2px;
  @include transition(.35s ease all);

}

#hh {
  text-align: center;
}

h1{
  font: 300 3em/1em 'Open Sans', sans-serif;
  border: solid 0.00019em #000;
  margin-bottom: 0.2em;
  padding: 0.4em 0.2em 0.4em 0.2em;
  background-color:lightblue;
  border-radius:0.2em;
  display: inline-block;
}

#hh{
  text-align: center;
  margin-left:auto;
  margin-right:auto;
  width:40%;
}

h1{
  font: 300 3em/1em 'Open Sans', sans-serif;
  border: solid 0.00019em #000;
  margin-bottom: 0.2em;
  padding: 0.4em 0.2em 0.4em 0.2em;
  background-color:lightblue;
  border-radius:0.2em;
}