html - 如何让 div 蓝色框出现在 h1 文本的前面？

Question

不知道怎么让div显示在h1文字前面，让蓝色框在文字前面？在过去的 30 分钟里，我一直被困在这个问题上，无法在脑海中解决它。我是初学者，请耐心等待。

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
    
.wrapper2 {
  position: absolute;
  z-index: 2;
  width: 500px;
  height: 250px;
  background: blue;
}
    
h1 {
  position: relative;
  z-index: 0;
}

<div class="wrapper2">
  <h1>Welcome</h1>
</div>

标签： htmlcss

Answer 1

如上所述，您可以简单地将<h1>元素放在 HTML 中的包装器之上。如果你想让你<h1>留在里面，你可以使用这个： display: none;或visibility: hidden; opacity: 0;

CSS：

h1 {
  position: relative;
  /* either of these */
  display: none;
  visibility: hidden;
  opacity: 0;
}