наложение текста в верхней части div

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>

результат

Answer 1

Вы можете попытаться добавить 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

Answer 2

вы можете использовать "z-index" в вашем теге h3.я написал код для вас, пожалуйста, проверьте это.

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

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

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