Html css Цвет фона div не отображается при наложении изображения

Question

У меня есть 2 div 1, у меня есть изображение, и у меня есть содержимое с белым цветом фона

<div class="first-box">
<img src="assets/design.png" width="500px">
</div>

<div class="second-box">
    <div class="welcome-text" >
         <div>Create Account</div>
    </div>
</div>

Это css

.first-box{
    height: 30%;
    padding: 0;
    border-radius: 0;
    width: 100%;
}

.second-box{

    margin-top: -10%;
    height: 70%;
    background-color: white;
    border-top-left-radius: 40px;
    border-top-right-radius: 40px;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
}

Как вы можете видеть во втором окне I используйте margin-top -10%;, чтобы перекрывать его с первым div, но при перекрытии его цвет фона белый не отображается. Мне нужно показать белый цвет фона при его перекрытии.

Answer 1

Добавить позицию: относительная; ко второй коробке.

.second-box{
    position:relative;
    margin-top: -10%;
    height: 70%;
    background-color: white;
    border-top-left-radius: 40px;
    border-top-right-radius: 40px;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
}

Answer 2

пробовали ли вы z-index: 9 в css, который вы хотите перекрыть, потому что на экране сначала показываются только те элементы, которые расположены ближе к экрану, как снизу, а также используются значения realtive и top -10px

Answer 3

Вы можете отделить "Создать аккаунт" div: HTML

<div class="first-box">
<img src="https://opensource.guide/assets/images/illos/legal.svg" width="500px">
</div>

<div class="second-box">

</div>

    <div class="welcome-text">
         <p>Create Account</p>
    </div>

в CSS, использовать display: inline-block; взять только ширину текста:

CSS

.first-box{
    height: 30%;
    padding: 0;
    border-radius: 0;
    width: 100%;
    background-color:red;

}

.second-box{
    margin-top: -10%;
    height: 70%;
    background-color: white;
    border-top-left-radius: 40px;
    border-top-right-radius: 40px;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
}
.welcome-text p{
  background-color: white;
  display: inline-block;
  overflow: visible;
}

fiddle: fiddle link