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 >

  <div >

    <div >
      <img src="images/chantal.jpg" alt="" >
    </div>



    <div >

      <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 >
    <h1 > <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 .

CodePudding user response：

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 >

  <div >

    <div >
      <img src="images/chantal.jpg" alt="" >
    </div>
    <div >

      <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 ><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.

CodePudding user response：

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 ></div>
  <div ></div>
</section>