Door deze eigenschapswaarde op absoluut te zetten, wordt het object uit de normale documentflow absolute positie getrokken, ongeacht de indeling van de inhoud eromheen. Als andere objecten met verschillende z-index eigenschappen al een bepaalde positie innemen, zullen ze elkaar niet beïnvloeden, maar overlappen ze op dezelfde positie. Het object heeft geen buitenste patch (marge), maar wel een binnenste patch (patding) en een rand (rand).
Om de absolute positionering van een object te activeren, moet je ten minste één van de linker-, rechter-, boven- en onderattributen specificeren en deze attribuutwaarde op absoluut zetten. Anders gebruiken bovenstaande attributen hun standaardwaarde auto, waardoor het object de normale HTML-lay-outregels volgt en direct na het vorige object wordt weergegeven.
TRBL-attributen (TOP, RECHTS, ONDER, LINKS) zijn alleen geldig als het positie-attribuut is ingesteld.
Je moet positie instellen: absoluut
Als de ouder (oneindig) het positieattribuut niet instelt, dan wordt het huidige absolute in combinatie met het TRBL-attribuut linksboven in de browser als het oorspronkelijke punt geplaatst
Als de ouder (oneindig) de positie-eigenschap stelt, dan wordt de huidige absolute in combinatie met de TRBL-eigenschap linksboven in de bovenhoek van de ouder (recent) als het oorspronkelijke punt geplaatst.
Bij het instellen van positie: relatief
De linkerbovenhoek van het ouderlijke (recente) inhoudsgebied is het oorspronkelijke punt gecombineerd met het TRBL-attribuut (of offset ten opzichte van het vorige element van het geplaatste element in het ouderinhoudsgebied), en de linkerbovenhoek van de BODY is het oorspronkelijke punt zonder de ouder. Relatieve positie kan niet worden gelaagd. Bij gebruik van relatieve positionering blijft het element zijn oorspronkelijke ruimte innemen, ongeacht of het wordt verplaatst of niet. Daarom zorgt het verplaatsen van een element ervoor dat het andere vakken overschrijft.
Over het algemeen is het gemakkelijk om fouten te maken bij het gebruik van Absolute als de webpagina gecentreerd is, omdat de webpagina zich altijd automatisch heeft aangepast aan de grootte van de resolutie, terwijl Absolute de linkerbovenhoek van de browser als het oorspronkelijke punt gebruikt en de positie niet verandert door de verandering in resolutie. Soms is het ook nodig om op de z-index te vertrouwen om de relatie tussen de boven- en onderkant van de container vast te stellen; hoe groter de waarde, hoe hoger de top, en het numerieke bereik is een natuurlijk getal. Natuurlijk is het belangrijk om op te merken dat de ouder-kindrelatie niet met z-index kan worden ingesteld, en het kindniveau moet boven en onder het ouderniveau liggen.
Door deze eigenschapswaarde op relatief te zetten, blijft het object in normale HTML-flow, maar de positie kan worden verschoven op basis van het vorige object. Tekst of objecten die een relatieve locator volgen, nemen hun eigen ruimte in zonder de natuurlijke ruimte van het object te bedekken. Daarentegen neemt de tekst of het object na het absolute positioneringsobject zijn natuurlijke ruimte in voordat het doelobject wordt weggetrokken van de normale documentstroom. Als je een absolute positioneringsobject buiten het venster plaatst, verschijnt er een scrollbalk. Het plaatsen van een relatief positionerend object buiten het kijkgebied verschijnt niet met een scrollbalk. Het grootste probleem met positionering is eigenlijk om de betekenis van elke positionering te onthouden. Relatieve positie is de beginpositie van het element "ten opzichte van" de documentstroom, terwijl absolute positie het voorouderelement is dat "ten opzichte van" het meest recente element is gepositioneerd.
Hier zijn de toevoegingen:
Hoewel ik de absolute (absoluut) en relatieve positie van CSS ken, heb ik de relevante effecten nooit zelf geschreven!
Na meer dan een halve dag werken kan het als voltooid worden beschouwd! Ik heb ook een paar van deze twee eigenschappen ontdekt!
De samenvatting is als volgt:
Laten we eerst naar de volgende laagstructuur kijken
<body>
<div id=posi>
<div id=rel> Deze laag geldt alleen positie:relatief; Stijl </div>
<div id=abs> Deze laag geldt alleen position:absoluut; Stijl </div>
<div id=sss> past geen <div>stijlen toe
</div>
</body>
1. absoluut: neemt geen zetel in, relatief: heeft een plaats!
Zoals de bovenbouw:
Lagen met id-relatie nemen één regel in beslag wanneer ze worden weergegeven! De ABS-laag erachter verschijnt alleen op de volgende regel!
Wanneer de laag met het id ABS wordt weergegeven, overlapt deze met de ID van SSS erachter!
2. Standaard (niet gepositioneerd in combinatie met top, enz.) wordt absolute (absolute positionering) gepositioneerd door de ouderlaag
Als bijvoorbeeld de bovenstaande laag met ID ABS is, en deze niet in combinatie met TOP is geplaatst, zal de weergavepositie bij de ouder POSI-laag zijn (POSI bevindt zich linksonder in het document, en ook linksonder)
3. Bij het combineren van boven, onder, rechts, links en andere attributen, wordt absoluut (absolute positionering) gepositioneerd met het venster als positionering, en relatief wordt verplaatst met zijn eigen bezetting als basislijn! Als volgt:
<body>
<div id=posi>
<div id=sss> past geen <div>stijlen toe
<div id=rel> Deze laag past position:relative toe; Bottom:30px; Stijl </div>
<div id=abs> Deze laag geldt alleen position:absoluut; Bottom:30px; Stijl </div>
</div>
</body>
Bovenstaande code:
De laag met de id-relatie schuift omhoog en overlapt de laag met de id SSS
De laag met ID ABS wordt verplaatst naar een positie 30 pixels van het venster verwijderd, met het venster als basislijn!
4. Bij het combineren van boven-, onder-, rechts-, linker- en andere attributen, als je wilt dat absolute (absolute positionering) de ouderlaag als positioneringsbasis gebruikt, kun je absolute of relatieve attributen op de ouderlaag toepassen! Als volgt:
<body>
<div id=posi style="positie:relatief">
<div id=rel> Deze laag past position:relative toe; Bottom:30px; Stijl </div>
<div id=abs> Deze laag geldt alleen position:absoluut; Bottom:30px; Stijl </div>
</div>
</body>
De bovenstaande code: id is de laag van posi, je kunt ook het absolute attribuut gebruiken!
id is de laag van rel, die niet wordt beïnvloed, en wordt verplaatst door een eigen tijdelijke factor als basislijn!
De laag met ID als ABS is gebaseerd op de onderrand van de POSI-laag als positioneringsbasis; als de hoogte van de POSI-laag op dat moment minder dan 30px is, kan de ABS-laag het mogelijk niet zien!
|
Geplaatst op 30-10-2014 14:39:28
|
|
|
