Superimpose 2 DIV

Question

I want realise this page

enter image description here

this is my work

enter image description here

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 .

score 0 · Answer 1 · answered Jan 19 '23 at 07:39

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.

but the problem is not solved i want share the screenshot but i don t know how to add it on this comment — pat66, Jan 19 '23 at 17:40
@pat66 are you sure you copied my HTML and CSS? if you run the snippet and expand it to full page you will see that my code works fine. — SnoopFrog, Jan 19 '23 at 20:19

score 0 · Answer 2 · answered Jan 19 '23 at 07:47

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>

score 0 · Answer 3 · answered Jan 19 '23 at 18:29

0

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

answered Jan 19 '23 at 18:29

pat66

1
1

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Jan 21 '23 at 12:51

Superimpose 2 DIV

3 Answers3