Att sätta detta egenskapsvärde till absolut kommer att dra objektet ur den normala dokumentflödes-absolutpositioneringen, oavsett innehållets layout runt omkring. Om andra objekt med olika z-index-egenskaper redan upptar en given position, kommer de inte att påverka varandra, utan överlappa på samma plats. Objektet har ingen yttre fläck (marginal), men har ändå en inre fläck (patting) och en kant (kant).
För att aktivera ett objekts absoluta positionering måste du specificera minst ett av vänster-, höger-, topp- och bottenattributen och sätta detta attributvärde till absolut. Annars kommer ovanstående attribut att använda sitt standardvärde auto, vilket gör att objektet följer de normala HTML-layoutreglerna och renderas omedelbart efter det föregående objektet.
TRBL-attribut (TOPP, HÖGER, NEDERST, VÄNSTER) är giltiga endast om positionsattributet är satt.
Du bör ställa in position:absolut
Om föräldern (infinite) inte sätter positionsattributet, placeras det aktuella absoluta i kombination med TRBL-attributet i det övre vänstra hörnet av webbläsaren som ursprungspunkt
Om föräldern (oändlig) sätter positionsegenskapen, placeras den nuvarande absoluta i kombination med TRBL-egenskapen i övre vänstra hörnet av föräldern (senare) som ursprungspunkt.
När man ställer in position: relativ
Det övre vänstra hörnet av föräldra- (senare) innehållsområdet är den ursprungliga punkten kombinerad med TRBL-attributet (eller offset i förhållande till föregående element i det placerade elementet i föräldrainnehållsområdet), och det övre vänstra hörnet av BODY är den ursprungliga punkten utan förälder. Relativ positionering kan inte lagers på. När man använder relativ positionering upptar elementet fortfarande sitt ursprungliga utrymme oavsett om det flyttas eller inte. Därför gör flytt av ett element att det skriver över andra rutor.
Generellt sett, om webbsidan är centrerad, är det lätt att göra misstag när man använder Absolute, eftersom webbsidan alltid har anpassats automatiskt med upplösningens storlek, medan Absolute använder det övre vänstra hörnet av webbläsaren som ursprungspunkt och inte ändrar positionen på grund av upplösningsförändringen. Ibland är det också nödvändigt att förlita sig på z-index för att sätta relationen mellan den övre och nedre delen av behållaren, ju större värde, desto högre topp, och det numeriska intervallet är ett naturligt tal. En sak att notera är förstås att förälder-barn-relationen inte kan sättas med z-index, och barnnivån måste ligga både över och under föräldern.
Att sätta detta egenskapsvärde till relativt behåller objektet i normalt HTML-flöde, men dess position kan förskjutas baserat på det föregående objektet. Text eller objekt som följer en relativ lokaliserare upptar sitt eget utrymme utan att täcka det naturliga utrymmet för det objekt som placeras. I kontrast upptar texten eller objektet efter det absoluta positioneringsobjektet dess naturliga utrymme innan det riktade objektet dras bort från det normala dokumentflödet. Att placera ett absolut positioneringsobjekt utanför vyfönstret får en rullningslist att visas. Att placera ett relativt positionerande objekt utanför visningsområdet visas inte med en rullningslist. Faktum är att huvudproblemet med positionering är att komma ihåg betydelsen av varje positionering. Relativ positionering är elementets initiala position "relativt dokumentflödet", medan absolut positionering är det förfaderelement som har placerats "relativt det senaste".
Här är tilläggen:
Även om jag känner till den absoluta positioneringen (absolut) och relativ positionering av CSS, har jag aldrig skrivit de relevanta effekterna själv!
Efter att ha arbetat mer än en halv dag kan den anses vara klar! Jag har också listat ut några av dessa två egenskaper!
Sammanfattningen är följande:
Låt oss först titta på följande lagerstruktur
<body>
<div id=posi>
<div id=rel> Detta lager gäller endast position:relativ; Stil </div>
<div id=abs> Detta lager gäller endast position:absolute; Stil </div>
<div id=sss> tillämpar inte <div>stilar
</div>
</body>
1. absolut: har ingen plats, relativ: har plats!
Såsom överbyggnad:
Lager med id rel kommer att uppta en rad när de visas! ABS-lagret bakom kommer bara att visas på nästa rad!
När lagret med id ABS visas kommer det att överlappa med ID för SSS bakom!
2. Som standard (inte placerad i kombination med toppen, etc.) placeras absolut (absolut positionering) av moderlagret
Till exempel, om lagret ovan med ID är ABS, om det inte är placerat i kombination med TOP, kommer dess visningsposition att vara med det föräldrade POSI-lagret (POSI finns i nedre vänstra hörnet av dokumentet, och det kommer också att finnas i det nedre vänstra hörnet)
3. När man kombinerar topp, botten, höger, vänster och andra attribut, placeras absolut (absolut positionering) med fönstret som positionering, och relativ förskjuts med sin egen beläggning som baslinje! Följande följer:
<body>
<div id=posi>
<div id=sss> tillämpar inte <div>stilar
<div id=rel> Detta lager applicerar position:relativ; botten: 30px; Stil </div>
<div id=abs> Detta lager gäller endast position:absolute; botten: 30px; Stil </div>
</div>
</body>
Ovan kod:
Lagret med id-relen flyttas upp och överlappar lagret med id SSS
Lagret med ID ABS flyttas till en position 30 pixlar bort från fönstret med fönstret som baslinje!
4. När du kombinerar topp, botten, höger, vänster och andra attribut, om du vill att absolut (absolut positionering) ska använda föräldralagret som positioneringsbaslinje, kan du applicera absoluta eller relativa attribut på föräldralagret! Följande följer:
<body>
<div id=posi style="position:relative">
<div id=rel> Detta lager applicerar position:relativ; botten: 30px; Stil </div>
<div id=abs> Detta lager gäller endast position:absolute; botten: 30px; Stil </div>
</div>
</body>
Ovanstående kod: id är lagret av posi, du kan också använda attributet absolute!
ID är lagret av rel, som inte påverkas, och som förskjuts av sin egen platshållare som baslinje!
Lagret med id som ABS baseras på den nedre kanten av POSI-lagret som positioneringsbaslinje, om höjden på POSI-lagret är mindre än 30px vid denna tidpunkt kanske ABS-lagret inte kan se det!
|
Publicerad på 2014-10-30 14:39:28
|
|
|
