|
|
Zverejnené 30. 10. 2014 14:39:28
|
|
|
Nastavenie tejto hodnoty vlastnosti na absolútnu vytiahne objekt z bežného absolútneho pozícionovania toku dokumentu, bez ohľadu na rozloženie obsahu okolo neho. Ak iné objekty s rôznymi vlastnosťami z-indexu už zaujímajú danú pozíciu, nebudú sa navzájom ovplyvňovať, ale budú sa prekrývať na tej istej pozícii. Objekt nemá vonkajšiu záplatu (okraj), ale stále má vnútornú záplatu (patding) a okraj (okraj).
Na aktiváciu absolútneho umiestnenia objektu musíte špecifikovať aspoň jeden z ľavých, pravých, horných, spodných atribútov a nastaviť túto hodnotu na absolútnu. Inak vyššie uvedené atribúty automaticky použijú predvolenú hodnotu, čo spôsobí, že objekt bude nasledovať bežné HTML pravidlá rozloženia a zobrazí sa hneď po predchádzajúcom objekte.
Atribúty TRBL (HORE, VPRAVO, DOLE, VĽAVO) sú platné len vtedy, ak je atribút pozície nastavený.
Mal by si nastaviť pozíciu:absolútne
Ak rodič (infinite) nenastaví atribút pozície, aktuálne absolútne je umiestnené v kombinácii s atribútom TRBL v ľavom hornom rohu prehliadača ako pôvodný bod
Ak rodič (nekonečný) nastavuje vlastnosť polohy, potom je aktuálne absolútne umiestnené v kombinácii s vlastnosťou TRBL do ľavého horného rohu rodiča (nedávno) ako pôvodný bod.
Pri nastavovaní polohy: relatívne
Horný ľavý roh nadradenej (nedávnej) obsahovej oblasti je pôvodný bod kombinovaný s atribútom TRBL (alebo offset vzhľadom na predchádzajúci prvok umiestneného prvku v nadradenej obsahovej oblasti) a ľavý horný roh BODY je pôvodný bod bez rodiča. Relatívne umiestnenie sa nedá vrstviť. Pri použití relatívneho umiestnenia prvok stále zaberá svoj pôvodný priestor bez ohľadu na to, či je posunutý alebo nie. Preto pohyb prvku spôsobí, že prepíše ostatné boxy.
Vo všeobecnosti, ak je webová stránka v strede, je ľahké urobiť chyby pri použití Absolute, pretože webová stránka sa vždy automaticky prispôsobovala veľkosti rozlíšenia, zatiaľ čo Absolute použije horný ľavý roh prehliadača ako pôvodný bod a nezmení pozíciu kvôli zmene rozlíšenia. Niekedy je tiež potrebné spoľahnúť sa na z-index na nastavenie vzťahu medzi hornou a dolnou časťou kontajnera: čím väčšia hodnota, tým vyššia horná časť, a číselný rozsah je prirodzené číslo. Samozrejme, treba si uvedomiť, že vzťah rodič-dieťa nemôže byť nastavený pomocou z-indexu a úroveň dieťaťa musí byť nad aj pod rodičom.
Nastavenie hodnoty tejto vlastnosti na relatívnu udržiava objekt v bežnom HTML toku, ale jeho pozícia môže byť posunutá na základe jeho predchádzajúceho objektu. Text alebo objekty, ktoré nasledujú relatívny lokalizátor, zaberajú vlastný priestor bez toho, aby pokrývali prirodzený priestor objektu, ktorý je umiestnený. Naopak, text alebo objekt po absolútnom polohovacom objekte zaberá svoj prirodzený priestor predtým, než je cieľový objekt odtiahnutý z bežného toku dokumentu. Umiestnenie absolútneho polohovacieho objektu mimo viewportu spôsobí objavenie posuvníka. Umiestnenie relatívneho polohovacieho objektu mimo pozorovacia oblasť sa nezobrazuje pomocou posuvníka. V skutočnosti je hlavným problémom s pozíciou zapamätať si význam každého postavenia. Relatívne umiestnenie je počiatočná pozícia prvku "relatívne" k" toku dokumentu, zatiaľ čo absolútne umiestnenie je prvok predka, ktorý bol umiestnený "relatívne k" najnovšiemu.
Tu sú doplnky:
Hoci poznám absolútne (absolútne) a relatívne umiestnenie CSS, nikdy som si sám nepísal relevantné efekty!
Po viac ako pol dňa práce sa to dá považovať za dokončené! Tiež som zistil niektoré z týchto dvoch vlastností!
Zhrnutie je nasledovné:
Pozrime sa najprv na nasledujúcu štruktúru vrstiev
<body>
<div id=posi>
<div id=rel> Táto vrstva sa vzťahuje iba na polohu:relativ; Štýl </div>
<div id=abs> Táto vrstva sa vzťahuje iba na pozíciu:absolútne; Štýl </div>
<div id=sss> neplatí <div>pre štýly
</div>
</body>
1. absolútny: nezaujíma miesto, relatívne: má miesto!
Napríklad nadstavba:
Vrstvy s id rel zaberajú pri zobrazení jeden riadok! ABS vrstva za ním sa objaví až na ďalšom riadku!
Keď sa zobrazí vrstva s ID ABS, prekrýva sa s ID SSS za ním!
2. Predvolene (nie v kombinácii s top a pod.) je absolútna (absolútna pozícia) umiestnená nadradenou vrstvou
Napríklad, ak je vyššie uvedená vrstva s ID ABS, ak nie je umiestnená v kombinácii s TOP, jej zobrazenie bude na nadradenej vrstve POSI (POSI je v ľavom dolnom rohu dokumentu a tiež v ľavom dolnom rohu)
3. Pri kombinovaní horných, spodných, pravých, ľavých a ďalších atribútov sa absolútne (absolútne umiestnenie) umiestňuje s oknom ako pozíciou a relatívne je posunuté o vlastnú obsadenosť ako základnú čiaru! Nasledovne:
<body>
<div id=posi>
<div id=sss> neplatí <div>pre štýly
<div id=rel> Táto vrstva aplikuje polohu:relativ; spodok: 30px; Štýl </div>
<div id=abs> Táto vrstva sa vzťahuje iba na pozíciu:absolútne; spodok: 30px; Štýl </div>
</div>
</body>
Vyššie uvedený kód:
Vrstva s id rel sa posúva nahor a prekrýva vrstvu s id SSS
Vrstva s ID ABS sa presunie na pozíciu 30 pixelov od okna, pričom okno bude základom!
4. Pri kombinovaní horných, spodných, pravých, ľavých a ďalších atribútov, ak chcete, aby absolútne (absolútne umiestnenie) použilo rodičovskú vrstvu ako základnú pozičnú líniu, môžete na nadradenú vrstvu aplikovať absolútne alebo relativné atribúty! Nasledovne:
<body>
<div id=posi style="position:relative">
<div id=rel> Táto vrstva aplikuje polohu:relativ; spodok: 30px; Štýl </div>
<div id=abs> Táto vrstva sa vzťahuje iba na pozíciu:absolútne; spodok: 30px; Štýl </div>
</div>
</body>
Vyššie uvedený kód: id je vrstva posi, môžete použiť aj absolútny atribút!
id je vrstva rel, ktorá nie je ovplyvnená a je posunutá vlastným zástupcom ako základom!
Vrstva s id ako ABS je založená na spodnom okraji vrstvy POSI ako základnej pozícii, ak je výška vrstvy POSI momentálne menšia ako 30px, ABS vrstva ju nemusí vidieť!
|
Predchádzajúci:Wu Ruanovi študenti, prosím, nechoďte do "Guangbutun" kúpiť si počítač! Aby sme neboli oklamaní!Budúci:Ako odstránim podčiarknutie hypertextového odkazu v HTML?
|
