Overlap div div ci-dessus

Ok, donc j'ai essayé de faire quelque chose comme ceci:Overlap div div ci-dessus

Cependant, chaque fois que je change la marge supérieure de « 3 », il tire également jusqu'à « 2 » à la même hauteur. J'ai enveloppé "3" à l'intérieur de "2" parce que je voulais que les fonds s'alignent.

html,body { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
.example { 
 
    background-color: #222; 
 
    padding: 100px; 
 
    text-align: center; 
 
    color: white; 
 
} 
 

 
.div2 { 
 
    background-color: #e8e8e8; 
 
} 
 

 
.div3 { 
 
    margin: -50px auto 0px auto; 
 
    padding: 20px; 
 
    background-color: #fff; 
 
    text-align: center; 
 
    width: 80%; 
 
} 
 

 
h1,p { 
 
    padding: 0px; 
 
    margin: 0px; 
 
}

<div class="example"> 
 
    <h1> 
 
    Div 1 
 
    </h1> 
 
</div> 
 
<div class="div2"> 
 
    <div class="div3"> 
 
    <h1> 
 
    Div 3 
 
    </h1> 
 
    <p> 
 
    Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text 
 
    </p> 
 
    </div> 
 
</div> 
 
<div class="example"> 
 
    <h1> 
 
    Div 4 
 
    </h1> 
 
</div>

Source

2017-10-14 Connor

Essayez d'ajouter 'top: -40px; position: relative; margin-bottom: -40px; 'to' .div3' – UncaughtTypeError

Bonjour @UncaughtTypeError, bien que votre réponse puisse aider à résoudre le problème ci-dessus, je déconseille d'utiliser des valeurs négatives dans la mesure du possible. C'est contre les meilleures pratiques. – Manu

Je suis réticent à les utiliser aussi - je me permets seulement de faire quelques exceptions. Mais je dirais que ce n'est qu'une mauvaise chose si vous en abusez pour une solution miracle, sans savoir * pourquoi * c'est généralement considéré comme "contre les meilleures pratiques". – UncaughtTypeError

C'est un effet des marges effondrement. Je le ferais simplement "l'inverse", positionnerais l'élément relatif, et utiliserais une marge négative-bas pour que l'extrémité inférieure div extérieure soit de nouveau alignée.

html,body { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
.example { 
 
    background-color: #222; 
 
    padding: 100px; 
 
    text-align: center; 
 
    color: white; 
 
} 
 

 
.div2 { 
 
    background-color: #e8e8e8; 
 
} 
 

 
.div3 { 
 
    position: relative; 
 
    top: -50px; 
 
    margin: 0 auto -50px auto; 
 
    padding: 20px; 
 
    background-color: #fff; 
 
    text-align: center; 
 
    width: 80%; 
 
} 
 

 
h1,p { 
 
    padding: 0px; 
 
    margin: 0px; 
 
}

<div class="example"> 
 
    <h1> 
 
    Div 1 
 
    </h1> 
 
</div> 
 
<div class="div2"> 
 
    <div class="div3"> 
 
    <h1> 
 
    Div 3 
 
    </h1> 
 
    <p> 
 
    Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text 
 
    </p> 
 
    </div> 
 
</div> 
 
<div class="example"> 
 
    <h1> 
 
    Div 4 
 
    </h1> 
 
</div>

Source

2017-10-14 19:40:14 CBroe

Je pense que vous voulez positionner div3 absolument div2 (qui devrait être relative). Vous pouvez alors jouer avec div3 indépendamment sans faire glisser div2 en cours de route.

Peut-être que quelque chose comme ça?

<div class="example"> 
    <h1> 
    Div 1 
    </h1> 
</div> 
<div class="div2"> 
    <h1> 
    Hello 
    </h1> 
    <div class="div3"> 
    <h1> 
    Div 3 
    </h1> 
    <p> 
    Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text 
    </p> 
    </div> 
</div> 
<div class="example"> 
    <h1> 
    Div 4 
    </h1> 
</div>

Et:

html,body { 
    margin: 0; 
    padding: 0; 
} 

.example { 
    background-color: #222; 
    padding: 100px; 
    text-align: center; 
    color: white; 
} 

.div2 { 
    position: relative; 
    background-color: #e8e8e8; 
    height: 200px; 
    text-align: center; 
} 

.div3 { 
    position: absolute; 
    margin: -50px auto 0px auto; 
    padding: 20px; 
    background-color: #fff; 
    text-align: center; 
    width: 80%; 
    top: 50%; 
    left: 50%; 
    transform: translateX(-50%); 
} 

h1,p { 
    padding: 0px; 
margin: 0px; 
}

Voir violon ici: https://jsfiddle.net/rdbjrqL3/

Source

2017-10-14 19:39:47 Manu

Mettre position: absolute dans .div2 et position:relative dans .div3

html,body { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
.example { 
 
    background-color: #222; 
 
    padding: 100px; 
 
    text-align: center; 
 
    color: white; 
 
} 
 

 
.div2 { 
 
    background-color: #e8e8e8; 
 
    position: absolute; 
 
} 
 

 
.div3 { 
 
    margin: -50px auto 0px auto; 
 
    padding: 20px; 
 
    background-color: #fff; 
 
    text-align: center; 
 
    width: 80%; 
 
    position:relative; 
 
} 
 

 
h1,p { 
 
    padding: 0px; 
 
    margin: 0px; 
 
}

<div class="example"> 
 
    <h1> 
 
    Div 1 
 
    </h1> 
 
</div> 
 
<div class="div2"> 
 
    <div class="div3"> 
 
    <h1> 
 
    Div 3 
 
    </h1> 
 
    <p> 
 
    Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text 
 
    </p> 
 
    </div> 
 
</div> 
 
<div class="example"> 
 
    <h1> 
 
    Div 4 
 
    </h1> 
 
</div>

Source

2017-10-14 19:50:58

Overlap div div ci-dessus

Répondre

Questions connexes