J'ai des divs des DIV sur mon HTML et l'un d'entre eux chargera l'image DIV, donc je le souhaite de chevauchement de son parent div. Voici mon code:
<div id="something1">
<div id="something2"></div>
<div id="parent" style="border: 15px solid #c1c1c1;width:200px; height:250px;">
<div id="child" style="position: absolute; border: 15px solid #a2f2e2"></div>
</div>
</div>
5 Réponses :
Pourquoi cela ne fonctionne-t-il pas pour vous? Si je vous comprends bien, vous voulez simplement masquer le parent div avec l'enfant div? Sortie sur Chrome:
pour le rendre générique, obtenir la position / dimension des parents en utilisant offsettop / Méthodes de gauche / hauteur / largeur et définissez les dimensions / la position de l'enfant en utilisant ceux-ci, je suis sûr qu'il y a beaucoup de poteaux sur afin que cela soit. 
Cela ne fonctionne pas, ne chevauche pas son parent. L'enfant doit avoir la même taille avec le parent et je ne pouvais rien voir de parent à cause de son chevauchement.
@Kamaci travaille pour moi sur Chrome et sur IE8 .. jsfiddle.net/sajjansarkar/d9tlr
Cela fonctionne parce que vous utilisez le corps comme fenêtre ... Essayez de mettre marge: 50px; à #parent , et il déplacera la sortie #child derrière ... dans votre exemple, le parent et l'enfant sont totalement indépendants, c'est une coïncidence qu'ils correspondent à
@Sajjansarkar essayer ce Jsfiddle.net/ncfcm Ça échoue lorsque je mets un div plat?
@kamaci ok, je suis confus, qu'essayez-vous exactement d'atteindre? Voulez-vous que l'enfant div puisse exactement la même taille que le parent et avoir exactement la même position, ce qui couvre parfaitement le parent? Est-ce que c'est ce que tu veux?
Oui et merci pour votre aide. J'ai vérifié votre code et ça va. Cependant, pourquoi il est échoué après que j'ai ajouté un div au sommet? Je cherche une solution qu'il n'échoue pas quand j'ajoute quelque chose de haut ou de quoi que ce soit d'autre?
HTML
#parent {
width: 100px;
height: 300px;
background-color: #a0a0a0;
width:200px;
height:250px;
position: relative;
}
#child {
width: inherit;
height: inherit;
position: absolute;
background-color: #a2f2e2;
top: 0px;
left: 0px;
}
Je ne veux rien voir de parent lorsque l'enfant a chevauché, mais je peux voir à votre solution?
C'est parce que vous devez modifier les valeurs pour correspondre à la taille du parent. Vous pouvez simplement utiliser la largeur: hériter; Hauteur: hériter; Sur l'enfant div - cela va superposer et faire correspondre la taille de la div des parents :)
Merci pour votre aide, mais ils ne sont pas superposés exactement :) L'enfant est un peu à gauche du parent, vous pouvez le voir d'ici: Tinkerbin .com / pf3aefje
C'est parce que vous devez définir haut et gauche à 0 - haut: 0; à gauche: 0; - Mise à jour malade
Premier problème est que Cela signifie que si aucun parent n'a "que" Correction , Ensuite, mettez second problème: avec position absolue, vous pouvez arrêter d'utiliser La définition de tous vers mais ici vous voulez les chevaucher, Ensuite ... simplement, utilisez simplement une valeur négative égale à la taille des bordures des parents: 15px; Démo : http://jsfiddle.net/ynfxj/9/ J'ai utilisé des frontières pointillées pour que vous puissiez voir les frontières de dessous de la mère;) absolu Les éléments positionnés font référence au premier élément parent avec une position différente de statique . relative ou absolu , il se référera au corps, ce qui n'est pas ce que vous voulez dans ce cas. position: relatif; à votre parent div. largeur et hauteur / Code> et commencez à utiliser haut , gauche , bas et droit propriétés; 0 signifie étend l'objet aux limites des parents .
Si je veux réutiliser mon enfant CSS devrais-je mettre à jour le code CSS des enfants en fonction de la CSS de mes parents?
Quand je l'utilise sans frontières, ça échoue?
Premier commentaire: absolu et fixe doit toujours être manipulé soigneusement, ils sont "portables" si Certaines conditions (des parents, principalement) sont les mêmes, à moins qu'ils vont gâcher. Pour le deuxième commentaire: absolument pas, supprimer les frontières de l'enfant n'affectera pas le bon fonctionnement: Jsfiddle.net/ynfxj / 9 (retirez l'opacité pour voir uniquement le fond de l'enfant); Si vous supprimez plutôt les frontières du parent, transformez simplement tous les -15px sur 0; ou vers la valeur frontière du nouvel parent ...
@Kamaci - Il me semble que vous manquez de connaissances fondamentales de CSS, comment cela fonctionne et pourquoi certaines choses se produisent. Je recommande de travailler via le Ressources sur le réseau de développeurs Mozilla afin que vous puissiez obtenir Une compréhension solide de CSS et peut comprendre seul pourquoi la solution d'Andrea "échoue" lorsque vous supprimez les frontières.
Tous les commentaires ? Vous êtes ok ou avez-vous toujours des problèmes?
Sajjan est le plus proche de ce que je peux dire, mais son a quelques défauts:
Position: absolu code> exige que son parent ait une position non statique (cela se fait souvent avec la position : relatif code>, qui fonctionne efficacement de la même manière que statique). li>
- Vous n'avez pas besoin de définir la hauteur et la largeur de l'enfant, juste le parent. Li>
ol>
Voici mon violon pour le démontrer. P>
#parent {
border: 5px solid gray;
position: relative;
height: 100px;
width: 100px;
margin-left: 50px;
}
#child {
position: absolute;
top:0;
left: 0;
right: 0;
bottom: 0;
background: red;
}
Essayez ceci:
<div id="something1">
<div id="something2"></div>
<div id="parent" style="border: 15px solid #c1c1c1;position:relative; width:200px; height:250px;">
<div id="child" style="position: absolute; border: 15px solid #a2f2e2; width:200px; height:250px; left:-15px; top:-15px"></div>
</div>
</div>
Quelle est la taille de cet enfant qui doit être?
@Andyholmes enfants Div devrait avoir la taille de son parent.
Vous pouvez simplement ajouter une hauteur: 100%; et largeur: 100%; à l'enfant div. Votre positionnement semble bon.
Oh désolé, avec ma solution, vous devriez changer de position T par rapport à l'enfant.