Jūs galite nustatyti vienam sričiai arba elementui, kaip jie bus pozicionuojami. Tam naudojamas position savybė. Ši savybė nurodo, kaip elementas galiausiai turėtų būti pozicionuotas. Visoje yra keturios skirtingos pozicionavimo variantai.
• static - nėra atliekama jokia speciali pozicionavimo ir vyksta normalus teksto srautas.
• relative - įvyksta reliatyvus pozicionavimas, orientuojantis į elemento normalią padėtį ar pradinę padėtį.
• absolute - vyksta absoliutus pozicionavimas naudojant viršų, apačią, kairę ir dešinę savybes. Absoliutūs pozicionuoti elementai yra už normalaus teksto srauto ribų. Absoliutus pozicionavimas skaičiuojamas absoliučiai, lyginant su tėvinio elemento kraštais (bet tik jei jis neturi position: static savybės).
• fixed - elementas yra absolutiai pozicionuotas. Susisukus elementas išlieka toje pačioje vietoje.
Pirmieji du variantai leidžia naudoti kintamą pozicionavimą. Čia elementai pozicionuojami vienas kitam atsižvelgiant vienas į kitą. Sekantys du pavyzdžiai parodo, kaip tai galėtų atrodyti:
• Elementas 2 yra perkeltas 30 pikselių, lyginant su elementu 1.
• Elementas 2 yra sukonstruotas po elemento 1.
Skiriasi, kai kur tiriant vėso ir normalią. Per tai galima elementus palikti labai konkrečiose vietose. Pozicionavimo informacija remiasi antžeminio elemento ar naršyklės langelio kraštais. Pavyzdys:
• Elementas 1 yra tiksliai 30 pikselių nuo dešinės krašto ir 20 pikselių nuo viršaus naršyklės lango perkeltas.
Toliau bus išsamiai pristatyti pozicionavimo skirtingi variantai. Tačiau prieš tai pastaba: Posisijuojant elementus, svarbu, kas vadinama srautu, atlieka svarbų vaidmenį. Apie šį svarbų CSS principą išsamiai kalbėsiu kitame vadovėlyje. Pagrindinis dalykas su posisuojimu yra tai, kaip tinklalapio elementai tekste juda. Čia elementai visuomet stumiami kiek įmanoma į tam tikras konkrečias kryptis. Taigi, posisuojimo būdu galima aiškiai nurodyti elementų srautą.
Reliatyvusis pozicionavimas
Naudodami reliatyvų pozicijavimą naudodami position: relative, įvyksta dvi dalykai:
• Dėžė yra išstumta iš jos normalaus srauto.
• Elemento pradinė vieta yra rezervuota.
Rezervuojant pradinę vietą, kiti elementai elgiasi taip, tarsi elementas iš tikrųjų vis dar būtų savo vietoje.
Pavyzdys:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PSD-Tutorials.de</title>
<style>
div {
width: 20%;
background-color: white;
padding: 10px;
border: 1px solid black;
margin: 5px;
}
#box {
position: relative;
top: 25px;
right: 25px;
background-color:#33CCFF;
}
</style>
</head>
<body>
<div id="box">Box 1</div>
<div>Box 2</div>
<div>Box 3</div>
</body>
</html>
Dėžutės 2 ir 3 nebuvo gauti jokie pozicionavimo nurodymai. Todėl jos eina pagal normalų dokumento srautą. Dėžė 1 buvo pozicionuota reliatyviai. Taigi, dėžės 2 ir 3 visiškai nėra veikiamos dėžės 1. Dėl šių dėžių vietos dėžės neimasi. Nurodydami top, right, left ir right pozicionuojate dėžės. Reliatyvų pozicionavimą paprastai matomi iš pradinio vietos dokumento srute.
• top: 25px - dėžė yri perkelta 25 pikselių žemyn. Dėžutės viršuje yra pridėta 25 pikselių.
• right: 25px - dėžė yra perkelta 25 pikselių į kairę. Dešinėje dėžutės vietoje yra įterpti 25 pikseliai.
Pikselių nurodymai rodomi kaip santykinė dėžės pradinė padėtis. Nurodymai nurodo, kur reikės įdėti reikšmę, taigi, viršuje ir dešinėje. Šis aspektas yra svarbus. Reikšmės taip nenusako, kur bus perkelta dėžė.
Apsolutusis pozicionavimas
Toliau eikite su absoliutaus pozicionavimo. Šis pozicijavimo būdas visiškai pašalina elementą iš srauto. Kiti puslapio elementai elgiasi taip, tarsi elementas iš viso nebūtų.
Pavyzdys:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PSD-Tutorials.de</title>
<style>
div {
width: 20%;
background-color: white;
padding: 10px;
border: 1px solid black;
margin: 5px;
}
#box {
position: absolute;
top: 25px;
right: 25px;
background-color:#33CCFF;
}
</style>
</head>
<body>
<div id="box">Box 1</div>
<div>Box 2</div>
<div>Box 3</div>
</body>
</html>Čia taip pat buvo apibrėžtos trys dėžės. Dėžė 1 yra absoliučiai pozicionuota.
Skirtingai nei reliatyvusis pozicionavimas, dėže 1 nebuvo atskirtos vietos. Dėžės 2 ir 3 pakyla į viršų.
Pozicionavimo nurradymai top, right, bottomorleft dabar neorientuojasi pagal dėžės pradinę vietą sraute. Vietoj to, nurodymai orientuojasi prie artimiausio supančio elemento, kuris buvo pozicionuotas su relative, absolute arba fixed. Jeigu nėra supančio elemento, pozicionavimas vykdomas santykinai į aukščiausią dokumentų medžio elementą, taigi į html.
Pozicionavimas su fiksuota padėtimi
Su position: fixed galima užfiksuoti elementus. Štai pavyzdys:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PSD-Tutorials.de</title>
<style>
p { margin-left: 25%; }
#fixiert {
position: fixed;
top: 20px;
left: 20px;
background-color:#33FFCC;
width: 20%;
padding: 10px;
border: 1px solid black;
}
</style>
</head>
<body>
<div id="fixiert">Splitter-Effekt Teil 1</div>
<p>Nur für kurze Zeit ist das neueste Tutorial oder Video-Training in der Online-Ansicht oder der Inhalt aus der Download-Kategorie punktefrei. Erfahre hier mehr ...</p>
</body>
</html>Fiksuotas dėžutė neslinka kartu, o visuomet lieka jam priskirtameje pozicijoje.
Fiksuotiems dėžutės visuomet aplinkinės aplinkos elementas yra naršyklės langas.
Prašome atkreipti dėmesį, kad yra didelių problemų dėl fiksuotų dėžučių senesniuose naršyklėse. Pvz., IE6 veikia ne taip, kaip turėtų. Kam norintiems prisitaikyti savo svetaines šiam naršyklės variantui, yra dvi galimybės:
• Apsisakyti nuo fiksuotų dėžučių.
• Naudoti skirtukus IE naršyklėje.
Jei norite naudoti skirtuką, rekomenduoju jums aplankyti puslapį http://thestyleworks.de/tut-art/iewinfixed.shtml. Ten yra parodyta, kaip fiksuotas dėžutes galima prisitaikyti šiai naršyklei naudojant mažąją JavaScript.
