|
|
Zveřejněno 30.10.2014 14:39:28
|
|
|
Nastavení této vlastnosti na absolutní vytáhne objekt z běžného absolutního pozicování toku dokumentu, bez ohledu na rozložení obsahu kolem něj. Pokud už jiné objekty s různými vlastnostmi indexu z zaujímají danou pozici, nebudou se navzájem ovlivňovat, ale budou se překrývat na stejné pozici. Objekt nemá vnější záplatu (okraj), ale stále má vnitřní záplatu (patování) a okraj (okraj).
Pro aktivaci absolutního umístění objektu musíte zadat alespoň jeden z atributů vlevo, vpravo, nahoře a dole a nastavit tuto hodnotu atributu na absolutní. Jinak výše uvedené atributy automaticky použijí výchozí hodnotu, což způsobí, že objekt bude následovat běžná HTML pravidla a bude vykreslován ihned po předchozím objektu.
Atributy TRBL (HORNÍ, PRAVÉ, DOLNÍ, LEVÉ) jsou platné pouze tehdy, pokud je nastaven atribut pozice.
Měl bys nastavit pozici:absolute
Pokud rodič (nekonečný) nenastavuje atribut pozice, pak je aktuální absolutní atribut umístěn v kombinaci s atributem TRBL v levém horním rohu prohlížeče jako původní bod
Pokud rodič (nekonečný) nastavuje vlastnost polohy, pak je aktuální absolutní objekt umístěn v kombinaci s vlastností TRBL v levém horním rohu rodiče (nedávného) jako původní bod.
Při nastavování polohy: relativní
Levý horní roh nadřazené (nedávné) obsahové oblasti je původní bod kombinovaný s atributem TRBL (nebo posun vůči předchozímu prvku umístěného prvku v nadřazené části obsahu) a levý horní roh BODY je původní bod bez rodiče. Relativní postavení nelze vrstvit. Při použití relativního umístění prvek stále zabírá své původní místo bez ohledu na to, zda je posunut nebo ne. Proto pohyb prvku způsobí, že přepíše jiné boxy.
Obecně platí, že pokud je webová stránka umístěna uprostřed, je snadné udělat chyby při použití Absolute, protože stránka se vždy automaticky přizpůsobovala velikosti rozlišení, zatímco Absolute použije jako původní bod levý horní roh prohlížeče a nezmění pozici kvůli změně rozlišení. Někdy je také nutné spolehnout se na z-index pro nastavení vztahu mezi horní a dolní částí kontejneru, čím větší hodnota, tím vyšší horní část, a číselný rozsah je přirozené číslo. Samozřejmě je třeba si uvědomit, že vztah rodič-dítě nelze nastavit pomocí z-indexu a úroveň dítěte musí být nad a pod rodičem.
Nastavení této vlastnosti na relativní udržuje objekt v běžném HTML toku, ale jeho pozice může být posunuta na základě předchozího objektu. Text nebo objekty, které následují relativní lokátor, zabírají svůj vlastní prostor, aniž by pokrývaly přirozený prostor objektu, který je umístěn. Naopak text nebo objekt po absolutním polohovacím objektu zabírá svůj přirozený prostor před tím, než je cílový objekt odtažen z běžného toku dokumentu. Umístění absolutního polohovacího objektu mimo viewport způsobí zobrazení posuvníku. Umístění objektu s relativní polohou mimo oblast se nezobrazuje pomocí posuvníku. Ve skutečnosti je hlavním problémem s umístěním si zapamatovat význam každého umístění. Relativní umístění je počáteční pozice prvku "relativně" k toku dokumentu, zatímco absolutní pozice je prvek předka, který byl umístěn "relativně k" nejnovějšímu prvku.
Zde jsou další novinky:
Ačkoliv znám absolutní (absolutní) a relativní umístění CSS, nikdy jsem si sám nepsal příslušné efekty!
Po více než půl dni práce lze považovat za dokončenou! Také jsem zjistil některé z těchto dvou vlastností!
Shrnutí je následující:
Podívejme se nejprve na následující strukturu vrstev
<body>
<div id=posi>
<div id=rel> Tato vrstva se vztahuje pouze na pozici:relativní; Styl </div>
<div id=abs> Tato vrstva se vztahuje pouze na pozici:absolute; Styl </div>
<div id=sss> neplatí <div>pro styly
</div>
</body>
1. absolutní: nezabírá místo, relativní: má místo!
Například nadstavba:
Vrstvy s id rel zabírají při zobrazení jednu řádku! ABS vrstva za ním se objeví až na dalším řádku!
Když se zobrazí vrstva s ID ABS, překrývá se s ID SSS za ním!
2. Ve výchozím nastavení (není umístěno v kombinaci s top atd.) je absolutní (absolutní umístění) umístěno nadřazovací vrstvou
Například pokud je výše uvedená vrstva s ID ABS, pokud není umístěna v kombinaci s TOP, její zobrazení bude u nadřazené vrstvy POSI (POSI je v levém dolním rohu dokumentu a také v levém dolním rohu)
3. Při kombinaci atributů nahoře, dole, vpravo, vlevo a dalších atributů je absolutní (absolutní umístění) umístěno tak, že okno je umístěno a relativní je posunuto vlastní obsazeností jako základní čárou! Následovně:
<body>
<div id=posi>
<div id=sss> neplatí <div>pro styly
<div id=rel> Tato vrstva aplikuje position:relative; dole: 30px; Styl </div>
<div id=abs> Tato vrstva se vztahuje pouze na pozici:absolute; dole: 30px; Styl </div>
</div>
</body>
Výše uvedený kód:
Vrstva s id rel se posouvá nahoru a překrývá vrstvu s id SSS
Vrstva s ID ABS bude přesunuta na pozici 30 pixelů od okna s oknem jako základem!
4. Při kombinování horních, dolních, pravých, levých a dalších atributů, pokud chcete, aby absolutní (absolutní pozice) byla nadřazená vrstva jako základní polohovací čára, můžete na nadřazenou vrstvu aplikovat absolutní nebo relativní atributy! Následovně:
<body>
<div id=posi style="position:relative">
<div id=rel> Tato vrstva aplikuje position:relative; dole: 30px; Styl </div>
<div id=abs> Tato vrstva se vztahuje pouze na pozici:absolute; dole: 30px; Styl </div>
</div>
</body>
Výše uvedený kód: id je vrstva posi, můžete také použít absolutní atribut!
id je vrstva rel, která není ovlivněna, a je posunuta vlastním zástupcem jako základní linií!
Vrstva s id jako ABS je založena na spodním okraji vrstvy POSI jako základní pozicionovací linii, pokud je výška vrstvy POSI v tuto chvíli menší než 30px, ABS vrstva ji nemusí vidět!
|
Předchozí:Wu Ruanovi studenti, prosím, nechoďte do "Guangbutun" kupovat počítač! Aby se nenechal oklamat!Další:Jak odstraním podtržítko hypertextového odkazu v HTML?
|
