|
|
Publisert på 30.10.2014 14:39:28
|
|
|
Å sette denne egenskapsverdien til absolutt vil dra objektet ut av den normale dokumentflytens absolutte posisjonering, uavhengig av innholdet rundt oppsettet. Hvis andre objekter med ulike z-indeks-egenskaper allerede opptar en gitt posisjon, vil de ikke påvirke hverandre, men overlappe i samme posisjon. Objektet har ikke en ytre flekk (margin), men har fortsatt en indre flekk (patting) og en kant (kant).
For å aktivere et objekts absolutte posisjonering må du spesifisere minst én av attributtene til venstre, høyre, topp og bunn og sette denne attributtverdien til absolutt. Ellers vil attributtene ovenfor bruke standardverdien auto, noe som vil få objektet til å følge de vanlige HTML-layoutreglene og bli gjengitt umiddelbart etter forrige objekt.
TRBL-attributter (TOP, RIGHT, BOTTOM, LEFT) er kun gyldige hvis posisjonsattributtet er satt.
Du bør sette posisjon: absolutt
Hvis forelderen (infinite) ikke setter posisjonsattributtet, plasseres det nåværende absolutte i kombinasjon med TRBL-attributtet øverst til venstre i nettleseren som det opprinnelige punktet
Hvis forelderen (uendelig) setter posisjonsegenskapen, plasseres den nåværende absolutten i kombinasjon med TRBL-egenskapen i øvre venstre hjørne av forelderen (nylig) som det opprinnelige punktet.
Når du setter posisjon: relativ
Det øvre venstre hjørnet av forelderens (nylige) innholdsområde er det opprinnelige punktet kombinert med TRBL-attributtet (eller offset i forhold til det forrige elementet i det plasserte elementet i foreldreinnholdsområdet), og øvre venstre hjørne av BODY er det opprinnelige punktet uten forelderen. Relativ posisjonering kan ikke lagdeles. Når man bruker relativ posisjonering, opptar elementet fortsatt sin opprinnelige plass uansett om det flyttes eller ikke. Derfor fører flytting av et element til at det overskriver andre bokser.
Generelt, hvis nettsiden er sentrert, er det lett å gjøre feil når man bruker Absolute, fordi nettsiden alltid har tilpasset seg automatisk med oppløsningsstørrelsen, mens Absolute bruker øvre venstre hjørne av nettleseren som opprinnelig punkt og ikke endrer posisjonen på grunn av oppløsningsendringen. Noen ganger er det også nødvendig å stole på z-indeksen for å sette forholdet mellom øvre og nedre del av beholderen; jo større verdi, jo høyere topp, og det numeriske området er et naturlig tall. Selvfølgelig er det viktig å merke seg at forholdet mellom foreldre og barn ikke kan settes med z-indeks, og barnenivået må være over og under forelderen.
Å sette denne egenskapsverdien til relativ beholder objektet i normal HTML-flyt, men posisjonen kan forskyves basert på det forrige objektet. Tekst eller objekter som følger en relativ lokator opptar sitt eget rom uten å dekke det naturlige området til objektet som plasseres. I kontrast opptar teksten eller objektet etter det absolutte posisjoneringsobjektet sin naturlige plass før det målrettede objektet dras bort fra den normale dokumentflyten. Å plassere et absolutt posisjoneringsobjekt utenfor visningsvinduet får en rullefelt til å dukke opp. Plassering av et relativt posisjonerende objekt utenfor visningsområdet vises ikke med en rullelinje. Faktisk er hovedproblemet med posisjonering å huske betydningen av hver posisjonering. Relativ posisjonering er startposisjonen til elementet «relativt til» dokumentflyten, mens absolutt posisjonering er forfaderelementet som er plassert «relativt til» det nyeste.
Her er tilleggene:
Selv om jeg kjenner den absolutte posisjoneringen (absolutt) og relative posisjonen til CSS, har jeg aldri skrevet de relevante effektene alene!
Etter å ha jobbet i mer enn en halv dag, kan det regnes som fullført! Jeg fant også ut noen av disse to egenskapene!
Sammendraget er som følger:
La oss først se på følgende lagstruktur
<body>
<div id=posi>
<div id=rel> Dette laget gjelder kun posisjon:relativ; Stil </div>
<div id=abs> Dette laget gjelder kun position:absolute; Stil </div>
<div id=sss> anvender ikke <div>stiler
</div>
</body>
1. absolutt: har ikke plass, relativ: har plass!
Som for eksempel overbygning:
Lag med id-rel vil oppta én linje når de vises! ABS-laget bak vil bare vises på neste linje!
Når laget med id ABS vises, overlapper det med ID-en til SSS bak!
2. Som standard (ikke plassert i kombinasjon med toppen, osv.) er absolutt (absolutt posisjonering) plassert av foreldrelaget
For eksempel, hvis laget over med ID er ABS, hvis det ikke er plassert i kombinasjon med TOP, vil visningsposisjonen være med det overordnede POSI-laget (POSI er nederst til venstre i dokumentet, og det vil også være i nedre venstre hjørne)
3. Når man kombinerer topp, bunn, høyre, venstre og andre attributter, plasseres absolutt (absolutt posisjonering) med vinduet som posisjonering, og relativt forskyves med sin egen besetting som grunnlinje! Som følger:
<body>
<div id=posi>
<div id=sss> anvender ikke <div>stiler
<div id=rel> Dette laget anvender position:relative; bunn:30px; Stil </div>
<div id=abs> Dette laget gjelder kun position:absolute; bunn:30px; Stil </div>
</div>
</body>
Ovenstående kode:
Laget med id-relen beveger seg opp og overlapper laget med id SSS
Laget med ID ABS vil bli flyttet til en posisjon 30 piksler unna vinduet med vinduet som baseline!
4. Når du kombinerer topp, bunn, høyre, venstre og andre attributter, hvis du vil at absolutt (absolutt posisjonering) skal bruke foreldrelaget som posisjoneringsbaseline, kan du bruke absolutte eller relative attributter på foreldrelaget! Som følger:
<body>
<div id=posi style="posisjon:relative">
<div id=rel> Dette laget anvender position:relative; bunn:30px; Stil </div>
<div id=abs> Dette laget gjelder kun position:absolute; bunn:30px; Stil </div>
</div>
</body>
Koden ovenfor: id er laget av posi, du kan også bruke absolute-attributtet!
id er laget av rel, som ikke påvirkes, og er forskjøvet av sin egen plassholder som baseline!
Laget med id som ABS er basert på den nederste kanten av POSI-laget som posisjoneringsbaseline, hvis høyden på POSI-laget er mindre enn 30px nå, kan ABS-laget kanskje ikke se det!
|
Foregående:Wu Ruans elever, vær så snill, ikke dra til "Guangbutun" for å kjøpe en datamaskin! For ikke å bli lurt!Neste:Hvordan fjerner jeg understreken i en hyperkobling i html?
|
