Ha ezt a tulajdonságértéket abszolútra állítjuk, az objektumot kihúzza a normál dokumentumfolyamat abszolút pozicionálásából, függetlenül a körülötte lévő tartalom elrendezésétől. Ha más, eltérő z-index tulajdonságú objektumok már elfoglalnak egy adott pozíciót, akkor nem hatnak egymásra, hanem átfednek ugyanabban a pozícióban. Az objektumnak nincs külső foltja (széle), de van belső folt (patding) és szegélye (szegélye).
Az objektum abszolút pozicionálásának aktiválásához legalább egyet meg kell határoznod a bal, jobb, felül, alsó attribútumot, és ezt az attribútumértéket abszolútra kell állítanod. Ellenkező esetben a fenti attribútumok az alapértelmezett értéküket használják, az auto, ami miatt az objektum követi a normál HTML elrendezési szabályokat, és azonnal az előző objektum után renderel.
A TRBL attribútumok (FELÜL, JOBB, ALUL, BAL) csak akkor érvényesek, ha a pozíció attribútuma be van állítva.
Pozíciót kell beállítani: abszolút
Ha a szülő (végtelen) nem állítja be a pozíció attribútumot, akkor az aktuális abszolút a böngésző bal felső sarkában lévő TRBL attribútummal együtt helyezkedik el eredeti pontként
Ha a szülő (végtelen) beállítja a pozíció tulajdonságot, akkor az aktuális abszolút a TRBL tulajdonsággal együtt helyezik el a szülő (legfrissebb) bal felső sarkában eredeti pontként.
Pozíció beállításakor: relatív
A szülő (legfrissebb) tartalomterület bal felső sarka az eredeti pont a TRBL attribútummal kombinálva (vagy az előző elemhez képest az előző elemhez képest a szülő tartalom területén), és a TEST bal felső sarka az eredeti pont a szülő nélkül. A relatív pozicionálás nem rétegezhető. Relatív pozicionálás esetén az elem továbbra is elfoglalja eredeti helyét, függetlenül attól, hogy mozgatják-e vagy sem. Ezért egy elem mozgatása más dobozokat is felülír.
Általánosságban, ha a weboldal középre van helyezve, könnyű hibázni az Absolute használatával, mert az oldal mindig automatikusan alkalmazkodott a felbontás méretéhez, míg az Absolut a böngésző bal felső sarkát használja eredeti pontként, és a felbontás változása miatt nem változtatja a pozíciót. Néha szükség van arra is, hogy a z-indexre támaszkodjunk a tartály felső és alsó részének közötti kapcsolat meghatározásához: minél nagyobb az érték, annál magasabb a felső szint, és a numerikus tartomány természetes szám. Természetesen fontos megjegyezni, hogy a szülő-gyermek kapcsolatot nem lehet z-indexkel beállítani, és a gyermek szintnek a szülő felett vagy alatta kell lennie.
Ennek a tulajdonságértéknek a relatív értéke megőrzi az objektumot normál HTML folyamatban, de a pozíciója az előző objektum alapján eltolható. A szöveg vagy tárgyak, amelyek egy relatív helymeghatározót követnek, saját teret foglalnak el anélkül, hogy lefednék a helyen helyezett tárgy természetes terét. Ezzel szemben az abszolút pozicionálás után a szöveg vagy objektum elfoglalja természetes terét, mielőtt a célzott objektumot elhúznák a normál dokumentumfolyamattól. Ha egy abszolút pozicionáló objektumot a látóablakon kívül helyeznek, egy görgetősáv jelenik meg. Egy relatív pozicionáló objektum elhelyezése a nézőterületen kívül nem jelenik meg görgetősávban. Valójában a pozicionálás fő problémája, hogy emlékezzünk minden pozicionálás jelentésére. A relatív pozicionálás az elem kezdeti pozíciója, "a dokumentum áramlásához képest", míg az abszolút pozicionálás az elős elem, amelyet a legutóbbihoz képest helyeztek el.
Íme a kiegészítések:
Bár ismerem a CSS abszolút pozicionálását (abszolút) és relatív pozicionálását, soha nem írtam meg egyedül a releváns hatásokat!
Több mint fél nap munka után teljes munka lehet! Én is rájöttem ezek közül a két tulajdonságból!
Az összefoglaló a következő:
Nézzük meg először a következő rétegstruktúrát
<body>
<div id=posi>
<div id=rel> Ez a réteg csak pozíció:relative alkalmazza; Stílus </div>
<div id=abs> Ez a réteg csak pozíció:abszolút; Stílus </div>
<div id=sss> nem <div>alkalmazza a stílusokat
</div>
</body>
1. Abszolút: nem foglal helyet, rokon: helye van!
Például a felépítmények:
Az id rel-rel rétegek egy sort foglalnak el, amikor megjelenítik! Az ABS réteg mögötte csak a következő vonalon jelenik meg!
Amikor az ABS azonosítójú réteg jelenik meg, átfedés lesz az SSS mögötti azonosítóval!
2. Alapértelmezés szerint (nem a felső réteggel kombinálva) az abszolút (abszolút pozicionálás) a szülőréteg által pozícionálja
Például, ha a fenti réteg azonosítóval ABS, ha nem a TOP kombinációban helyezik el, akkor a megjelenítési pozíciója a szülő POSI réteggel lesz (a POSI a dokumentum bal alsó sarkában van, és szintén a bal alsó sarokban)
3. Amikor a felül, alsó, jobb, bal és egyéb attribútumokat kombináljuk, az abszolút (abszolút pozicionálás) az ablak pozícióval van pozicionálva, a relatív pedig az alapvonal a saját elfoglaltságával eltolódik! A következők:
<body>
<div id=posi>
<div id=sss> nem <div>alkalmazza a stílusokat
<div id=rel> Ez a réteg pozíció:relatív pozíciót alkalmaz; alja: 30px; Stílus </div>
<div id=abs> Ez a réteg csak pozíció:abszolút; alja: 30px; Stílus </div>
</div>
</body>
A fenti kód:
Az id rel-rel rendelkező réteg felfelé mozog, és átfedi az id SSS-t tartalmazó réteget
Az ABS azonosítójú réteget egy 30 pixelrel az ablaktól egy olyan pozícióba helyezzük el, ahol az ablak lesz az alapvonal!
4. Amikor a felül, alső, jobb, bal és más attribútumokat kombinálod, ha abszolút (abszolút pozicionálást) akarod, hogy a szülőréteget használd pozicionálási alapvonalként, akkor abszolút vagy relatív attribútumokat alkalmazhatsz a szülőrétegre! A következők:
<body>
<div id=posi style="pozíció:relative">
<div id=rel> Ez a réteg pozíció:relatív pozíciót alkalmaz; alja: 30px; Stílus </div>
<div id=abs> Ez a réteg csak pozíció:abszolút; alja: 30px; Stílus </div>
</div>
</body>
A fenti kód: id a posi rétege, az abszolút attribútumot is használhatod!
Az ID a REL réteg, amely nem érintett, és saját helyjelzője ellensúlyozza az alapvonalat!
Az azonosító réteg ABS alapján a POSI réteg alsó szélén alapul pozicionálási alapvonalként, ha a POSI réteg magassága jelenleg kevesebb, mint 30px, az ABS réteg nem láthatja azt!
|
Közzétéve 2014. 10. 30. 14:39:28
|
|
|
