css - HTML CSS 如何在更多文本上叠加文本

Question

CodePen 链接:http://codepen.io/anon/pen/xqGVKv

目标是尝试将“欢迎”置于“家”之后。我不知道该怎么做。我试过设置位置，但似乎无法正常工作。

html:

<div class="head">
  <h1>welcome</h1>
  <h2 id='overlay'>HOME</h2>
</div> <!--end class head -->

Answer 1

将 position: relative 添加到父级，然后将 home 绝对定位在 welcome 之上。删除默认边距将使它们更好地重叠。

* {margin:0;}

.head {
  font-size: 18px;
  color: blue;
  position: relative;
}

#overlay {
  color: red;
  font-size: 90px;
  position: absolute;
  top: 0; left: 0;
  margin: 0;
}

<div class="head">
  <h1>welcome</h1>
  <h2 id='overlay'>HOME</h2>
</div> <!--end class head -->