<div class="child"> **contents1** </div> **contents2** </div> en de"> <div class="child"> **contents1** </div> **contents2** </div> en de"> <div class="child"> **contents1** </div> **contents2** </div> en de" />

Kan ik de <div> -grootte bevatten child <div> met positie: absoluut?

Ik ben een website aan het bouwen en heb een probleem.

als de HTML-code lijkt op:

<div class="parent">    
    <div class="child">
         **contents1**
    </div>

     **contents2**
</div>

en de CSS-stylesheet zoals:

.parent{ position: relative;}
.child{ position: absolute; top: 10px; left: 20px;}

In die situatie bevat de rand van 'bovenliggend' niet het gebied 'child' ,  maar alleen de begrenzende inhoudsbox 2.

Is er een manier om het op te lossen?

Ik wil dat het selectiekader van bovenliggend element de begrenzingsvakken van kinderen bevat, ongeacht hun positiekenmerk.

Ik kan mogelijk de grootte van het bovenliggende item berekenen via jQuery ,

maar ik denk dat er een manier is die ik alleen met CSS kan doen.

Hoop een positieve antwoord te krijgen.

Bedankt!

0
Het is niet mogelijk met alleen CSS. Een absoluut gepositioneerd element is los van zijn ouder. Maar als je vertelt, wat de uiteindelijke lay-out zou moeten zijn, vinden we misschien een oplossing met zwevende elementen of een andere manier om het goed te krijgen.
toegevoegd de auteur insertusernamehere, de bron
Niet opgenomen, wilt u alstublieft meer beschrijven?
toegevoegd de auteur Tooraj Jam, de bron

1 antwoord

position:absolute; takes the element out of document flow - that's pretty much the point of the property.

Als uw .child echter een statische hoogte heeft, kunt u wegkomen door op de juiste manier een opvulling toe te voegen aan het bovenliggende element:

.parent{position:relative;padding-top:60px;} /*(40+10*2)px*/
.child{position:absolute;top:10px;left:20px;height:40px;}

Fiddled

De kans bestaat dat absolute positionering is misbruikt als u nog steeds rekening wilt houden met .child dimensies en u waarschijnlijk weg zou kunnen komen met een alternatief (moeilijk iets te suggereren zonder betere context)

Over het algemeen raad ik u aan geen anonieme blokken te gebruiken .

2
toegevoegd