Hvis du sætter denne egenskabsværdi til absolut, vil objektet trække objektet ud af den normale dokumentflow-absolutpositionering, uanset indholdet omkring. Hvis andre objekter med forskellige z-indeks egenskaber allerede befinder sig på en given position, vil de ikke påvirke hinanden, men overlappe i samme position. Objektet har ikke en ydre plet (margin), men har stadig en indre plet (patting) og en kant (kant).
For at aktivere et objekts absolutte positionering skal du angive mindst én af venstre-, højre-, top- og bundattributterne og sætte denne attributværdi til absolut. Ellers vil ovenstående attributter bruge deres standardværdi auto, hvilket får objektet til at følge de normale HTML-layoutregler og blive gengivet umiddelbart efter det forrige objekt.
TRBL-attributter (TOP, HØJRE, BUND, VENSTRE) er kun gyldige, hvis positionsattributten er sat.
Du bør sætte position: absolut
Hvis forælderen (uendelig) ikke sætter positionsattributtet, placeres det nuværende absolutte i kombination med TRBL-attributten i øverste venstre hjørne af browseren som det oprindelige punkt
Hvis forælderen (uendelig) sætter positionsegenskaben, placeres den nuværende absolutte i kombination med TRBL-egenskaben i øverste venstre hjørne af forælderen (nylig) som det oprindelige punkt.
Når man sætter position: relativ
Det øverste venstre hjørne af det forælder(nye) indholdsområde er det oprindelige punkt kombineret med TRBL-attributten (eller offset i forhold til det forrige element af det placerede element i forældreindholdsområdet), og det øverste venstre hjørne af BODY er det oprindelige punkt uden forælderen. Relativ placering kan ikke lagdeles. Når man bruger relativ positionering, optager elementet stadig sin oprindelige plads, uanset om det flyttes eller ej. Derfor får flytning af et element andre bokse til at overskrive.
Generelt, hvis websiden er centreret, er det let at lave fejl, når man bruger Absolute, fordi websiden altid automatisk har tilpasset sig opløsningens størrelse, mens Absolute bruger det øverste venstre hjørne af browseren som det oprindelige punkt og ikke ændrer positionen på grund af ændringen i opløsning. Nogle gange er det også nødvendigt at stole på z-indekset for at fastsætte forholdet mellem den øvre og nedre del af beholderen; jo større værdi, desto højere top, og det numeriske interval er et naturligt tal. Selvfølgelig er det vigtigt at bemærke, at forholdet mellem forælder og barn ikke kan sættes med z-indeks, og barnets niveau skal være både over og under forælderen.
Hvis denne egenskabsværdi sættes til relativ, forbliver objektet i normal HTML-flow, men dets position kan forskydes baseret på det forrige objekt. Tekst eller objekter, der følger en relativ lokator, optager deres eget rum uden at dække det naturlige område for det objekt, der placeres. Til sammenligning optager teksten eller objektet efter det absolutte positioneringsobjekt sit naturlige rum, før det målrettede objekt trækkes væk fra det normale dokumentflow. Hvis man placerer et absolut positioneringsobjekt uden for viewporten, vises der en rullebjælke. Placering af et relativt positioneringsobjekt uden for visningsområdet vises ikke med en rullebjælke. Faktisk er hovedproblemet med positionering at huske betydningen af hver positionering. Relativ positionering er elementets startposition "i forhold til" dokumentflowet, mens absolut placering er det forfader-element, der er placeret "relativt til" det seneste.
Her er tilføjelserne:
Selvom jeg kender den absolutte (absolute) og relative placering af CSS, har jeg aldrig skrevet de relevante effekter selv!
Efter at have arbejdet i mere end en halv dag kan det betragtes som færdigt! Jeg har også fundet ud af nogle af disse to egenskaber!
Resuméet er som følger:
Lad os først se på den følgende lagstruktur
<body>
<div id=posi>
<div id=rel> Dette lag anvender kun position:relative; Stil </div>
<div id=abs> Dette lag anvender kun position:absolute; Stil </div>
<div id=sss> anvender ikke <div>stilarter
</div>
</body>
1. absolut: besætter ikke en plads, relativ: har en plads!
Såsom overbygning:
Lag med id rel vil optage én linje, når de vises! ABS-laget bagved vil kun vises på næste linje!
Når laget med id ABS vises, overlapper det med ID'et for SSS bagved!
2. Som standard (ikke placeret i kombination med top osv.) placeres absolut (absolut positionering) af forældrelaget
For eksempel, hvis det ovenstående lag med ID er ABS, og det ikke er placeret i kombination med TOP, vil dets visningsposition være med det overordnede POSI-lag (POSI er i nederste venstre hjørne af dokumentet, og det vil også være i nederste venstre hjørne)
3. Når man kombinerer top, bund, højre, venstre og andre attributter, placeres absolut (absolut positionering) med vinduet som positionering, og relativ forskydes med sin egen belægning som baseline! Som følger:
<body>
<div id=posi>
<div id=sss> anvender ikke <div>stilarter
<div id=rel> Dette lag anvender position:relative; bund: 30px; Stil </div>
<div id=abs> Dette lag anvender kun position:absolute; bund: 30px; Stil </div>
</div>
</body>
Ovenstående kode:
Laget med id-relationen bevæger sig op og overlapper laget med id SSS
Laget med ID ABS vil blive flyttet til en position 30 pixels væk fra vinduet med vinduet som baseline!
4. Når du kombinerer top, bund, højre, venstre og andre attributter, hvis du vil have absolut (absolut positionering) til at bruge forældrelaget som positioneringsbaseline, kan du anvende absolutte eller relative attributter på forældrelaget! Som følger:
<body>
<div id=posi style="position:relative">
<div id=rel> Dette lag anvender position:relative; bund: 30px; Stil </div>
<div id=abs> Dette lag anvender kun position:absolute; bund: 30px; Stil </div>
</div>
</body>
Ovenstående kode: id er laget af posi, du kan også bruge attributtet absolute!
id er det lag af relation, som ikke påvirkes, og er forskudt af sin egen pladsholder som baseline!
Laget med id som ABS er baseret på den nederste kant af POSI-laget som positioneringsbaseline; hvis højden på POSI-laget er under 30px på dette tidspunkt, kan ABS-laget måske ikke se det!
|
Opslået på 30/10/2014 14.39.28
|
|
|
