在 div 顶部重叠文本

Question

我正在尝试像这样在 div 中重叠文本。我正在使用 Bootstrap，但可以使用 CSS。图片中的例子，但我真的需要文字稍微下一点。

image of the example

我试过了

<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 顶部重叠文本

overlap text in top of a div

css

text

bootstrap-4

overlap