Superposer deux div

Programmation
#1

BOnsoir

Je desire realiser cette maquette

2

voici mon travail

qsd

j ai positionne le texte « lucette » en position absolute

mais la div centrale est toujours au dessus

puis je centre la div centrale ainsi:

.central{

      display: flex;
      width: 66vw;
      height: 55vh;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%,50%);
      z-index: 2;
      

   }

et la j obtiens le resultat ci-dessous:

56

mon code html integral:

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

code css:

 *{
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;
      
   }

Pourrais-je avoir des elements de reponse.

merci.

#2

salut,
je crois que ton soucis, c’est l’utilisation de l’overlay:

#3

Bonsoir

Zargos

merci pour ton message mais l overlay n est pas la solution a mon probleme
j ai revu mon code css
le resultat est preferable
FWTZG

a ce stade je ne parviens pas a positionner la div central au centre.

#4

C’est plus avec le css que tu va faire ça.

Genre un code html préparant tes div :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Superposer une div sur une autre div avec CSS</title>
    <style> 
      /* Mettez le code CSS ici. */
    </style>
  </head>
  <body>
    <div class="parent">
      <div class="child1"></div>
      <div class="child1 child2"></div>
    </div>
  </body>
</html>

et du css avec tes deux div qu ise chevauchent :

.parent {
    position: relative;
    width: 300px;
    height: 300px;
    margin: 10px;
}
.child1 {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    opacity: 0.7;
    background: red;
}
.child2 {
    z-index: 1;
    margin: 30px;
    background: green;
}

Je ne suis clairement pas un developeur mais il est très facile de trouver des exemples sur le net.

#5

Merci Clochette

pour ton message cette solution c est sur le site waytolearnx elle marche pas vraiment dans mon cas

#6

Elle fonctionne, mais flex n’est clairement pas le truc à utiliser pour ce que tu cherche à faire (c’est même totalement l’inverse si j’en coirs les nombreux articles que j’ai consulté).

https://openclassrooms.com/forum/sujet/superposition-de-deux-images-en-flexbox

Après comme évoqué, on peu trouver pas mal de ressources sur le net :

https://grafikart.fr/forum/23147

Sinon avec de l’empilement et du z-index pour gérer les profondeurs, mais avoue que lâcher flexbox et travailler avec du html et du css ce serait tout de même plus facile :wink:

2 J'aime