Question

我正在尝试像这样在div中重叠文本。我正在使用Bootstrap，但可以使用CSS。图片中的示例，但我真的需要将文本放在下面。

我尝试过

<h3 class="text-center" style="margin: 0px 0px -10px 0px">WebDevelopment.</h3>


<div class="row justify-content-center">
    <div class="box2" >
        <h4>alo</h4>
    </div>
    <div class="box3" >
            <h4>alo</h4>
    </div>
</div>

the resut

Answer 1

您可以在h3标签中使用“ z-index”。我为您写了一些代码，请检查一下。

h3{
  text-align: center;
  position: relative;
  z-index: 1;
}

.box2{
  width: 50%;
  background: red;
  float:left;
}

.box3{
  width: 50%;
  background: blue;
  float:left;
}

Answer 2

您可以尝试添加position: relative：

<h3 class="text-center" style="margin: 0px 0px -10px 0px;position: relative;">WebDevelopment.</h3>

有关位于https://www.w3schools.com/cssref/pr_class_position.asp上的排名的更多信息

在div顶部重叠文本

2 个答案: