Superimpose 2 DIV - html

Question

I want realise this page
this is my work
the probleme is i can't superimpose the div who contain the text "LUCETTE" under the div who contain the picture
my code html:
* {
font-size: 16px;
font-family: 'playfair_displayblack';
}
.container {
position: relative;
}
.central {
display: flex;
width: 66vw;
height: 55vh;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, 50%);
z-index: 2;
}
.left {
flex: 1;
}
.right {
flex: 2;
background-color: #2b563b;
overflow: hidden;
}
.belle {
max-width: 100%;
max-height: 100%;
display: block;
border: 9px solid whitesmoke;
}
.bas {
display: flex;
flex-direction: row;
}
.pied {
bottom: 100px;
width: 90vw;
height: 30vh;
margin-left: auto;
margin-right: auto;
}
.titre span {
text-align: center;
text-transform: uppercase;
font-size: 16rem;
font-weight: bolder;
font-family: 'playfair_displayitalic';
position: absolute;
bottom: 0;
z-index: -1;
}
<main class="container">
<div class="central">
<div class="left">
<img src="images/chantal.jpg" alt="" class="belle">
</div>
<div class="right">
<section>
<header>
<h1> <span>strategy</span> </h1>
</header>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</section>
</div>
</div>
<div class="pied">
<h1 class="titre"> <span>lucette</span> </h1>
</div>
</main>
THANKS .
i'm tryng to superimpose the div who contain the image on top of the div who contain the text "LUCETTE".
but the text "LUCETTE" is on the top of my page .

Answer 1

Try this:
* {
font-size: 16px;
font-family: 'playfair_displayblack';
}
.container {
position: relative;
padding-top: 100px;
height: 100vh;
display: flex;
justify-content: center;
}
.central {
display: flex;
width: 66vw;
height: 55vh;
z-index: 2;
}
.left {
flex: 1;
}
.right {
flex: 2;
background-color: #2b563b;
overflow: hidden;
}
.belle {
max-width: 100%;
max-height: 100%;
display: block;
border: 9px solid whitesmoke;
}
.bas {
display: flex;
flex-direction: row;
}
.pied {
bottom: 100px;
width: 90vw;
height: 30vh;
margin-left: auto;
margin-right: auto;
}
.pied {
font-weight: bolder;
font-family: serif;
position: absolute;
width: 0px;
overflow: visible;
bottom: 35%;
left: 50%;
}
.pied h1 {
position: absolute;
text-align: center;
text-transform: uppercase;
font-size: 16rem;
transform: translate(-50%, 0);
font-family: 'playfair_displayitalic';
top: 0;
left: 50%;
}
<main class="container">
<div class="central">
<div class="left">
<img src="images/chantal.jpg" alt="" class="belle">
</div>
<div class="right">
<section>
<header>
<h1> <span>strategy</span> </h1>
</header>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</section>
</div>
</div>
<div class="pied"><h1>lucette</h1></div>
</main>
Mind the fact that you might need to tweak the bottom attribute of .pied as I did not have that font.
Main issue in your code was that you didn't set position: absolute for the main container of the text. I did some tweaks to ensure that text is also centered etc.

Answer 2

Using absolute position removes items from the normal flow of the page, and can often lead to isolation and z-index mistakes.
I'm attaching a method using a grid layout to superimpose items. Grids are usually easier to debug.
Just to be clear absolute positions can be used, this is just an alternative.
section {
display: grid;
}
.behind {
height: 5rem;
width: 5rem;
background-color: red;
grid-area: 1 / 1;
}
.front {
height: 3rem;
width: 3rem;
background-color: blue;
/* Can also use grid-area */
grid-column: 1;
grid-row: 1;
}
<section>
<div class="behind"></div>
<div class="front"></div>
</section>

Answer 3

enter image description here
Now the result is better but the problem now i want move the bloc center ho contain the picture and the texte in the the middle on the page but i can 't