Nustačius šią ypatybės reikšmę į absoliučią, objektas bus nuvilktas iš įprastos dokumento srauto absoliučios padėties, neatsižvelgiant į aplink jį esančio turinio išdėstymą. Jei kiti objektai, turintys skirtingas z indekso savybes, jau užima tam tikrą padėtį, jie neturės įtakos vienas kitam, bet sutaps toje pačioje padėtyje. Objektas neturi išorinio pleistro (paraštės), bet vis tiek turi vidinį pleistrą (patruliavimą) ir kraštinę (kraštinę).
Norėdami suaktyvinti absoliučią objekto padėtį, turite nurodyti bent vieną iš kairės, dešinės, viršutinės, apatinės atributų ir nustatyti šią atributo reikšmę kaip absoliučią. Priešingu atveju aukščiau nurodyti atributai naudos numatytąją reikšmę automatinis, todėl objektas laikysis įprastų HTML išdėstymo taisyklių ir bus generuojamas iškart po ankstesnio objekto.
TRBL atributai (TOP, RIGHT, BOTTOM, LEFT) galioja tik tada, kai nustatytas pozicijos atributas.
Turėtumėte nustatyti poziciją:absoliutus
Jei pirminis (begalinis) nenustato pozicijos atributo, dabartinis absoliutus yra išdėstytas kartu su TRBL atributu viršutiniame kairiajame naršyklės kampe kaip pradinis taškas
Jei pirminis (begalinis) nustato padėties ypatybę, tada dabartinis absoliutus kartu su TRBL ypatybe yra viršutiniame kairiajame pirminio (naujausio) kampe kaip pradinis taškas.
Nustatant padėtį: santykinė
Viršutinis kairysis pirminio (naujausio) turinio srities kampas yra pradinis taškas kartu su TRBL atributu (arba poslinkis, palyginti su ankstesniu išdėstyto elemento elementu pirminio turinio srityje), o viršutinis kairysis BODY kampas yra pradinis taškas be pirminio. Santykinė padėtis negali būti sluoksniuota. Naudojant santykinę padėtį, elementas vis tiek užima pradinę erdvę, nepriklausomai nuo to, ar jis perkeliamas, ar ne. Todėl perkėlus elementą jis perrašo kitus langelius.
Paprastai tariant, jei tinklalapis yra centre, naudojant "Absolute" lengva suklysti, nes tinklalapis visada automatiškai prisitaikė prie skiriamosios gebos dydžio, o "Absolute" naudos viršutinį kairįjį naršyklės kampą kaip pradinį tašką ir nepakeis padėties dėl skiriamosios gebos pasikeitimo. Kartais taip pat reikia pasikliauti z indeksu, kad būtų nustatytas ryšys tarp konteinerio viršutinės ir apatinės dalies, kuo didesnė vertė, tuo didesnis viršus, o skaitinis diapazonas yra natūralus skaičius. Žinoma, reikia atkreipti dėmesį į tai, kad tėvų ir vaikų santykių negalima nustatyti naudojant z indeksą, o vaiko lygis turi būti aukščiau ir žemiau tėvų.
Nustačius šią ypatybės reikšmę į santykinę, objektas išlieka įprastame HTML sraute, tačiau jo padėtis gali būti nukreipta pagal ankstesnį objektą. Tekstas ar objektai, einantys po santykinio lokatoriaus, užima savo erdvę, neuždengdami natūralios objekto erdvės. Priešingai, tekstas arba objektas po absoliučios padėties nustatymo objekto užima natūralią erdvę, kol tikslinis objektas nutempiamas nuo įprasto dokumento srauto. Įdėjus absoliučią padėtį nustatantį objektą už peržiūros srities ribų, pasirodo slinkties juosta. Santykinio padėties nustatymo objekto išdėstymas už peržiūros srities ribų nerodomas naudojant slinkties juostą. Tiesą sakant, pagrindinė padėties nustatymo problema yra prisiminti kiekvienos padėties reikšmę. Santykinė padėtis yra pradinė elemento padėtis dokumento srauto atžvilgiu, o absoliuti padėtis yra protėvio elementas, kuris buvo išdėstytas "santykin" su naujausiu.
Štai papildymai:
Nors aš žinau absoliučią poziciją (absoliutus) ir santykinis pozicionavimas CSS, aš niekada parašė atitinkamų efektų pats!
Padirbėjus ilgiau nei pusę dienos, jis gali būti laikomas baigtu! Aš taip pat išsiaiškinau kai kuriuos iš šių dviejų atributų!
Santrauka yra tokia:
Pirmiausia pažvelkime į šią sluoksnių struktūrą
<body>
<div id=posi>
<div id=rel> Šis sluoksnis taikomas tik pozicija:santykinis; Stilius </div>
<div id=abs> Šis sluoksnis taikomas tik pozicija:absoliutus; Stilius </div>
<div id=sss> netaiko <div>stilių
</div>
</body>
1. absoliutus: neužima vietos, giminaitis: turi vietą!
Pavyzdžiui, antstatas:
Sluoksniai su id rel užims vieną eilutę, kai bus rodomi! ABS sluoksnis už jo bus rodomas tik kitoje eilutėje!
Kai bus rodomas sluoksnis su id ABS, jis sutaps su SSS ID!
2. Pagal nutylėjimą (neišdėstytas kartu su viršumi ir pan.), absoliutus (absoliutus pozicionavimas) yra pirminis sluoksnis
Pavyzdžiui, jei aukščiau pateiktas sluoksnis su ID yra ABS, jei jis nėra išdėstytas kartu su TOP, jo rodymo padėtis bus su pirminiu POSI sluoksniu (POSI yra apatiniame kairiajame dokumento kampe, taip pat bus apatiniame kairiajame kampe)
3. Derinant viršų, apačią, dešinę, kairę ir kitus atributus, absoliutus (absoliutus padėties nustatymas) yra išdėstytas su langu kaip padėtis, o santykinis yra kompensuojamas su savo užimtumu kaip bazine linija! Taip:
<body>
<div id=posi>
<div id=sss> netaiko <div>stilių
<div id=rel> Šis sluoksnis taiko position:reliatyvus; apačia:30px; Stilius </div>
<div id=abs> Šis sluoksnis taikomas tik pozicija:absoliutus; apačia:30px; Stilius </div>
</div>
</body>
Virš kodo:
Sluoksnis su id rel juda aukštyn ir sutampa su id SSS
Sluoksnis su ID ABS bus perkeltas į padėtį 30 pikselių atstumu nuo lango, o langas yra pagrindinė linija!
4. Derinant viršutinius, apatinius, dešinįjį, kairįjį ir kitus atributus, jei norite, kad absoliutus (absoliutus pozicionavimas) naudotų pirminį sluoksnį kaip pozicionavimo pagrindą, galite taikyti absoliučius arba santykinius atributus pirminiam sluoksniui! Taip:
<body>
<div id=posi style="position:relative">
<div id=rel> Šis sluoksnis taiko position:reliatyvus; apačia:30px; Stilius </div>
<div id=abs> Šis sluoksnis taikomas tik pozicija:absoliutus; apačia:30px; Stilius </div>
</div>
</body>
Aukščiau pateiktas kodas: id yra posi sluoksnis, taip pat galite naudoti absoliutų atributą!
id yra rel sluoksnis, kuris neturi įtakos ir yra kompensuojamas savo vietos rezervavimo ženklu kaip bazine linija!
Sluoksnis, kurio ID yra ABS, yra pagrįstas apatiniu POSI sluoksnio kraštu kaip padėties nustatymo bazine linija, jei POSI sluoksnio aukštis šiuo metu yra mažesnis nei 30 pikselių, ABS sluoksnis gali jo nematyti!
|
Paskelbta 2014-10-30 14:39:28
|
|
|
