Polohování prvků na webové stránce s vlastností polohy CSS

Duben 23, 2024

Před kaskádovým stylem jste měli omezenou kontrolu nad umístěním objektů na své webové stránce. Můžete použít tabulku HTML k mírnému ovládání polohy, ale nebylo to příliš přesné. Nyní s CSS můžete mít přesnou kontrolu nad tím, jak je každý prvek umístěn na vaší webové stránce.

Než budete moci použít vlastnost pozice CSS k umístění prvků na své webové stránce, musíme si projednat terminologii používanou pro komunikaci s webovým prohlížečem. CSS nebere v úvahu pouze šířku a výšku vaší webové stránky, ale také rozměry webového prohlížeče.

Šířka a výška prohlížeče
Nejprve si můžete myslet, že se to týká otevřeného okna prohlížeče. Ale to opravdu odkazuje na celý prohlížeč, včetně ovládacích prvků a tlačítek.
Živá šířka a výška
Toto je termín pro zobrazovanou oblast prohlížeče. Nezahrnuje ovládací prvky.
Šířka a výška dokumentu
Toto je celá šířka a výška vaší webové stránky. Pokud jsou tyto rozměry větší než živá šířka a výška, prohlížeč podle potřeby zobrazí posuvníky.

Nyní, když znáte podmínky pro hranice, ve kterých můžete umístit části své webové stránky pomocí CSS, pojďme se podívat na čtyři hodnoty pozic.

Statický
Toto je výchozí nastavení. Pokud pro prvek neurčíte jinak, prohlížeč použije statické umístění. Stejně jako to vypadá, se statickým umístěním nemůžete přemístit prvky na webové stránce. Jak tedy prohlížeč určí, kam umístit každý objekt na svou webovou stránku? Umístí každý prvek v pořadí, v jakém se vyskytují ve vašem HTML kódu. Máte-li obrázek loga, poté pozdrav a oznámení o autorských právech ve vašem HTML, prohlížeč je umístí na webovou stránku v tomto pořadí. Nelze přesunout pozdrav nad obrázek loga.
Relativní
Relativní umístění funguje stejně jako statické v tom, že pořadí prvků v kódu HTML řídí tok prvků na stránce. Relativní umístění však můžete použít k ovládání polohy prvku ve vztahu k ostatním prvkům na webové stránce.
Absolutní
Pokud s prvkem použijete absolutní umístění, bude tento prvek nezávislý na zbytku webové stránky. Protože její umístění již není určeno pořadím HTML, budete muset k umístění prvku použít souřadnice X a Y.
Pevný
Toto funguje stejně jako absolutní umístění. Prvek, který má pevné umístění, se však webovou stránkou neposouvá. Toto je pěkná funkce, kterou lze použít pro logo nebo nabídku, kterou chcete zůstat viditelnou při posouvání stránky směrem nahoru.

Video Návody: CSS Efecto - 02 PseudoElementos @JoseCodFacilito (Duben 2024).

Polohování prvků na webové stránce pomocí vlastnosti polohy CSS, HTML, CSS, vlastnost polohy CSS, statické polohování, relativní polohování, absolutní polohování, pevné polohování, jak umisťovat prvky na webové stránce, pomocí CSS umisťovat prvky na webové stránce

Předchozí Článek

Následující Článek

Související Články

počítače

Nástroje pro výběr Adobe Illustrator CS2

Duben 2024

Pokud jste novým uživatelem AdobeR IlustrátorR CS2 si brzy všimnete, že většina úprav, které provedete na svém kresbě, začíná výběrem. Někdy budete chtít změnit celý obrázek. Většinou však budete...

počítače

Přepnout hudbu na pozadí v aplikaci Kwik 2

Duben 2024

V tomto tutoriálu budeme pokračovat v práci na přepínacím tlačítku pro hudbu na pozadí. Když jsme v minulých tutoriálech vytvořili tlačítka, nejprve jsme vytvořili vrstvu tlačítek a poté k této...