Pozícia prvkov HTML hrá dôležitú úlohu pri organizovaní komponentov webovej stránky. Presnejšie povedané, polohu prvkov možno upraviť pomocou CSS “ pozíciu ' nehnuteľnosť. Táto vlastnosť môže byť spojená s vlastnosťami odsadenia, ako sú vlastnosti hore, vľavo, vpravo a dole, ktoré poskytujú špecifické hodnoty na úpravu prvku na stránke. Avšak, „ absolútne ” umiestnené prvky je možné upraviť vzhľadom na najbližšie umiestnený prvok.
Tento príspevok vysvetlí absolútne umiestnenie CSS.
Vlastnosť CSS „pozícia“.
' pozíciu ” vlastnosť v CSS možno použiť na úpravu pozície prvku. Rôzne hodnoty vlastnosti polohy sú pevné, absolútne, relatívne, statické a lepkavé. Tieto hodnoty sa nastavujú pomocou vlastností odsadenia, ako je horná, pravá, ľavá a spodná časť, na úpravu polohy prvku.
Ako použiť absolútnu pozíciu CSS?
Absolútne umiestnenie prvku možno použiť pomocou CSS “ pozíciu “vlastnosť s hodnotou” absolútne “. Prvok s absolútnou polohou sa upraví podľa jeho najbližšie umiestneného nadradeného prvku. Ak však predchodca nie je umiestnený, prispôsobí sa vzhľadom na časť tela dokumentu.
Príklad
Poďme pochopiť koncept na praktickom príklade.
Krok 1: Vytvorte súbor HTML
Do súboru HTML v rámci prvku body pridajte div s názvom triedy “ hlavné “. Potom do vytvoreného prvku div pridajte HTML značku spojenú s nasledujúcimi atribútmi:
-
- “ src “ poskytuje odkaz na obrázok.
- “ trieda ” sa používa v CSS na štýlovanie prvkov.
- “ všetko ” určuje text, ktorý sa zobrazí namiesto obrázka, ak sa obrázok nepodarí načítať na stránku.
- “ všetko ” určuje text, ktorý sa zobrazí na stránke namiesto obrázka, ak sa obrázok nepodarí načítať na stránku.
Potom pridajte ďalší div obsahujúci prvky h1 a p nadpisu a odseku:
< div trieda = 'hlavné' >< div trieda = 'obsah' >
< img src = 'images/linuxlogo.png' trieda = 'Domov' všetko = 'logo linux' šírka = '80px' >
< h1 > Absolútna poloha CSS h1 >
< p > Dobrý deň, tím Linuxhint ! p >
div >
div >
V CSS sa na zdobenie prvkov HTML používa niekoľko vlastností štýlu.
Krok 2: Štýl „všetky“ prvky
* {rodina písiem: Verdana, Ženeva, Tahoma, sans-serif;
}
Prvky HTML sú štylizované pomocou „ font-family “vlastnosť s hodnotou” Verdana, Ženeva, Tahoma, sans-serif “. Tento zoznam hodnôt zabezpečuje, že ak prehliadač nepodporuje prvý štýl, použije sa druhý.
Krok 3: Štýl „home“ div
.Domov {pozícia: absolútna;
hore: 50px;
vľavo: 45px;
}
Nižšie sú uvedené vlastnosti aplikované na „ Domov ”div:
-
- “ pozíciu vlastnosť nastavuje polohu prvku. Tu sa pridáva „ absolútne ” umiestni prvok relatívne k časti tela HTML.
- “ top ” vlastnosť sa využíva na vertikálne nastavenie prvku.
- “ vľavo ” vlastnosť sa používa na horizontálne nastavenie prvku.
Krok 4: Štýl „content“ div
.obsah {farba pozadia: kadetská modrá;
šírka: 300px;
výška: 250px;
padding-left: 40px;
ľavý okraj: 80px;
}
Nižšie sú uvedené vlastnosti CSS, ktoré sa aplikujú na „ obsahu ”div:
-
- “ farba pozadia vlastnosť nastavuje farbu pozadia prvku.
- “ šírka vlastnosť nastavuje šírku prvku.
- “ výška vlastnosť nastavuje výšku prvku.
- “ polstrovanie-vľavo ” je nastavená tak, aby pridala priestor na ľavú stranu obsahu prvku.
- “ ľavý okraj vlastnosť určuje priestor na ľavej strane prvku.
V tomto bode bude naša webová stránka vyzerať takto:
Z vyššie uvedeného výsledku je zrejmé, že obrázok domovskej stránky div je umiestnený vo vzdialenosti 50 pixelov zhora a 45 pixelov zľava od tela dokumentu. Okrem toho je pozícia domovského prvku div nastavená vzhľadom na časť tela HTML.
Ako upraviť polohu prvku „relatívne“ k umiestnenému nadradenému prvku?
Táto časť vás prevedie úpravou polohy prvku vzhľadom na najbližšiu pozíciu nadradeného prvku.
Set “position” Vlastnosť “content” div
poloha: relatívna;
Ak chcete upraviť polohu prvku vzhľadom na nadradený prvok, nastavte „ pozíciu ” vlastnosť nadradeného elementu na “ príbuzný “hodnota.
Nastaviť vlastnosť „position“ prvku „img“.
.Domov {pozícia: absolútna;
hore: 100px;
vľavo: 220px;
}
Tu:
-
- “ pozíciu ” vlastnosť s hodnotou nastavenou ako “ absolútne ” bude umiestnená relatívne k rodičovskému prvku (to znamená, že pozícia div obsahu je nastavená hodnotou relatívne).
- “ top Vlastnosť ” sa používa na nastavenie polohy prvku zhora.
- “ vľavo Vlastnosť ” sa používa na nastavenie pozície prvku zľava.
Výkon
Z výsledku je vidieť, že obrázok bol umiestnený vzhľadom na jeho rodičovský div a vyzerá to vhodne.
Záver
CSS ' pozíciu Vlastnosť ” sa používa na nastavenie polohy prvkov HTML. Táto vlastnosť môže byť hodnotená ako pevná, relatívna, absolútna, priľnavá a statická. ' absolútne Hodnota ” umiestni prvok zodpovedajúci jeho najbližšie umiestnenému rodičovskému prvku. Tento príspevok vysvetľuje absolútne umiestnenie CSS na praktickom príklade.