Question

指向CodePen的链接：http://codepen.io/anon/pen/xqGVKv

目标是尝试放置＆＃34; welcome＆＃34;落后，＆＃34; home＆＃34;。我不知道该怎么做。我试过设定位置，但我似乎无法让它起作用。

HTML：

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

Answer 1

你应该指定＆＃34;绝对＆＃34;你的元素的位置，以及你想要在另一个元素之上的元素的位置，只需给它一个更高的＆＃34; z-index＆＃34; ：）

试试这个css：

h1{
  font-size:50px;
  color:red;
  position:absolute;
  z-index:2;
}
h2{
  font-size:60px;
  color:green;
  position:absolute;
  z-index:3;
}

在这里小提琴：https://jsfiddle.net/captain_theo/v7bv3h7f/1/

Answer 2

将position: relative添加到父级，然后绝对置于欢迎之后。并且删除默认边距将使它们更好地重叠。

＆＃13;

* {margin:0;}

.head {
  font-size: 18px;
  color: blue;
  position: relative;
}

#overlay {
  color: red;
  font-size: 90px;
  position: absolute;
  top: 0; left: 0;
  margin: 0;
}

＆＃13;

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

＆＃13;

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

2 个答案: