Problème de hauteur de superposition Div

Hy les gars.Problème de hauteur de superposition Div

J'ai une situation de superposition div à l'intérieur d'un autre div.

Pourquoi le div principal ne correspond pas à la taille de taille lorsque j'utilise la position relative dans un div interne pour créer une superposition.

See the picture Je ne peux pas utiliser la position: absolue car j'ai besoin que le défilement fonctionne à l'intérieur de la div principale.

Voir le code:

div.main 
 
    { 
 
     \t width: 300px; height: auto; 
 
    \t border: solid 1px black; overflow: auto; 
 
    } 
 
\t div.box1 
 
    { 
 

 
     \t width: 350px; height: 50px; border: solid 1px red; 
 
    } 
 
\t div.box2 
 
    { 
 

 
    \t position: relative; top: -52px; left: 0px; z-index: 1; 
 
    \t width: 350px; height: 50px; border: solid 1px green; 
 
    }

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
</head> 
 
<body> 
 
<div class="main"> 
 
\t <div class="box1">box 1</div> 
 
\t <div class="box2">box 2 - overlay</div> 
 
</div> 
 
</body> 
 
</html>

Je peux utiliser un autre paramètres css mais je dois SINC le défilement des divs internes.

Source

2017-10-18 Fabio Alves Francelino

Parce qu'il est positionné par rapport à sa position normale/naturelle en quelque façon, il agit comme il est toujours là même si ce n'est pas. – VXp

Si je comprends bien votre question, voici ce que vous avez besoin:

div.main 
 
    { 
 
     \t width: 300px; height: auto; 
 
    \t border: solid 1px black; overflow: auto; 
 
     
 
    position: relative; 
 
    } 
 
\t div.box1 
 
    { 
 

 
     \t width: 350px; height: 50px; border: solid 1px red; 
 
    } 
 
\t div.box2 
 
    { 
 

 
    \t position: absolute; 
 
    top: 0; 
 
    left: 0px; 
 
    z-index: 1; 
 
    width: 350px; 
 
    height: 100%; 
 
    background: rgba(0,0,0,0.5); 
 
    }

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
</head> 
 
<body> 
 
<div class="main"> 
 
\t <div class="box1">box 1</div> 
 
\t <div class="box2"></div> 
 
</div> 
 
</body> 
 
</html>

Source

2017-10-18 22:08:31 izulito

position: relative conserve encore l'espace d'origine libre pour son élément - il ne se déplace que l'élément hors de son origine position par les valeurs haut/bas/gauche/droite. Mais l'espace libre est toujours là où il est sans ces paramètres. Un conteneur d'emballage avec la hauteur aut agira comme si l'élément relativement placé était toujours à sa position d'origine, causant ce que vous avez soulevé dans votre question. Pour forcer une solution comme vous le souhaitez, vous devez utiliser une hauteur fixe et overflow-y: hidden sur votre élément de conteneur.

div.main { 
 
    width: 300px; 
 
    height: 52px; 
 
    border: solid 1px black; 
 
    overflow-y: hidden; 
 
} 
 

 
div.box1 { 
 
    width: 350px; 
 
    height: 50px; 
 
    border: solid 1px red; 
 
} 
 

 
div.box2 { 
 
    position: relative; 
 
    top: -52px; 
 
    z-index: 1; 
 
    width: 350px; 
 
    height: 50px; 
 
    border: solid 1px green; 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
</head> 
 

 
<body> 
 
    <div class="main"> 
 
    <div class="box1">box 1</div> 
 
    <div class="box2">box 2 - overlay</div> 
 
    </div> 
 
</body> 
 

 
</html>

Source

2017-10-18 22:18:03 Johannes

que j'ai expliqué, oui. Il n'y a pas vraiment de solution à ce problème, juste une réponse pour expliquer pourquoi cela ne fonctionne pas comme le PO l'attendait, et une solution pour le forcer à agir comme prévu. – Johannes

Problème de hauteur de superposition Div

Répondre

Questions connexes