Pozice prvků HTML hraje zásadní roli při organizaci komponent webové stránky. Přesněji řečeno, pozici prvků lze upravit pomocí CSS “ pozice ' vlastnictví. Tato vlastnost může být spojena s vlastnostmi offsetu, jako jsou vlastnosti nahoře, vlevo, vpravo a dole, které poskytují specifické hodnoty pro úpravu prvku na stránce. Nicméně, „ absolutní ” umístěné prvky lze upravit vzhledem k nejbližšímu umístěnému prvku.
Tento příspěvek vysvětlí absolutní umístění CSS.
Vlastnost CSS „pozice“.
' pozice ” vlastnost v CSS lze použít k úpravě pozice prvku. Různé hodnoty vlastnosti position jsou pevné, absolutní, relativní, statické a lepivé. Tyto hodnoty se nastavují pomocí vlastností odsazení, jako je top, right, left a bottom, pro úpravu polohy prvku.
Jak použít absolutní umístění CSS?
Absolutní umístění prvku lze použít pomocí CSS „ pozice 'vlastnost s hodnotou' absolutní “. Prvek s absolutní polohou je upraven podle jeho nejbližšího umístěného nadřazeného prvku. Pokud však předchůdce není umístěn, přizpůsobí se vzhledem k části těla dokumentu.
Příklad
Pojďme pochopit koncept na praktickém příkladu.
Krok 1: Vytvořte soubor HTML
V souboru HTML v prvku body přidejte div s názvem třídy „ hlavní “. Poté do vytvořeného prvku div přidejte HTML značku spojenou s následujícími atributy:
-
- “ src “ poskytuje odkaz na obrázek.
- “ třída ” se používá v CSS ke stylování prvků.
- “ všechno Atribut ” určuje text, který se zobrazí místo obrázku, pokud se nepodaří načíst obrázek na stránku.
- “ všechno Atribut ” určuje text, který se zobrazí na stránce místo obrázku, pokud se nepodaří načíst obrázek na stránku.
Poté přidejte další div obsahující prvky h1 a p nadpisu a odstavce:
< div třída = 'hlavní' >< div třída = 'obsah' >
< img src = 'images/linuxlogo.png' třída = 'Domov' všechno = 'logo linux' šířka = '80px' >
< h1 > Absolutní umístění CSS h1 >
< p > Dobrý den, tým Linuxhint ! p >
div >
div >
V CSS se k ozdobení prvků HTML používá několik vlastností stylu.
Krok 2: Styl „všech“ prvků
* {rodina písem: Verdana, Geneva, Tahoma, sans-serif;
}
Prvky HTML jsou stylizovány pomocí „ rodina písem 'vlastnost s hodnotou' Verdana, Ženeva, Tahoma, sans-serif “. Tento seznam hodnot zajišťuje, že pokud prohlížeč nepodporuje první styl, použije se druhý.
Krok 3: Styl „home“ div
.Domov {pozice: absolutní;
nahoře: 50px;
vlevo: 45px;
}
Níže jsou uvedeny vlastnosti použité pro „ Domov ”div:
-
- “ pozice Vlastnost ” nastavuje polohu prvku. Zde je přidáno „ absolutní ” umístí prvek vzhledem k části těla HTML.
- “ horní ” vlastnost se používá pro vertikální úpravu prvku.
- “ vlevo, odjet ” vlastnost se používá pro horizontální nastavení prvku.
Krok 4: Styl div
.obsah {barva pozadí: kadetově modrá;
šířka: 300px;
výška: 250px;
padding-left: 40px;
margin-left: 80px;
}
Níže jsou uvedeny vlastnosti CSS, které jsou aplikovány na „ obsah ”div:
-
- “ barva pozadí Vlastnost ” nastavuje barvu pozadí prvku.
- “ šířka Vlastnost ” nastavuje šířku prvku.
- “ výška Vlastnost ” nastavuje výšku prvku.
- “ polstrování-vlevo ” je nastavena tak, aby přidala mezeru na levou stranu obsahu prvku.
- “ okraj-levý Vlastnost ” určuje prostor na levé straně prvku.
V tomto okamžiku bude naše webová stránka vypadat takto:
Z výše uvedeného výsledku je vidět, že obrázek domovské stránky div je umístěn ve vzdálenosti 50 pixelů shora a 45 pixelů zleva od těla dokumentu. Kromě toho je poloha domovského prvku div nastavena vzhledem k části těla HTML.
Jak upravit polohu prvku „relativně“ k umístěnému nadřazenému prvku?
Tato část vás provede úpravou polohy prvku vzhledem k nejbližší poloze nadřazeného prvku.
Set “position” Vlastnost “content” div
poloha: relativní;
Chcete-li upravit polohu prvku vzhledem k nadřazenému prvku, nastavte „ pozice “ vlastnost nadřazeného prvku na “ relativní “hodnota.
Nastavit vlastnost „position“ prvku „img“.
.Domov {pozice: absolutní;
nahoře: 100px;
vlevo: 220px;
}
Tady:
-
- “ pozice ” vlastnost s hodnotou nastavenou jako “ absolutní ” bude umístěn relativně k rodičovskému prvku (to znamená, že pozice div obsahu je nastavena hodnotou relativní).
- “ horní Vlastnost ” se používá pro nastavení pozice prvku shora.
- “ vlevo, odjet Vlastnost ” se používá pro nastavení pozice prvku zleva.
Výstup
Z výsledku je vidět, že obrázek byl umístěn vzhledem k jeho rodičovskému divu a vypadá to vhodně.
Závěr
CSS' pozice ” vlastnost se používá k nastavení pozice prvků HTML. Tuto vlastnost lze hodnotit jako pevnou, relativní, absolutní, lepivou a statickou. ' absolutní Hodnota ” umístí prvek odpovídající jeho blízkému nadřazenému prvku. Tento příspěvek vysvětluje absolutní umístění CSS na praktickém příkladu.