Jūs varat noteikt pozicionēšanas veidu no jebkura jomas vai elementa. Šim nolūkam izmantojama position īpašība. Šī īpašība norāda, kā elementam galu galā jābūt pozicionētam. Kopumā ir pieejami četri dažādi pozicionēšanas veidi.
• static - īpaša pozicionēšana netiek veikta un notiek parasts teksta plūsma.
• relative - notiek relatīva pozicionēšana, kas orientējas pēc elementa normālās pozīcijas vai sākotnējās pozīcijas.
• absolute - notiek absolūta pozicionēšana izmantojot top, bottom, left un right īpašības. Absolūti pozicionētie elementi atrodas ārpus parastā teksta plūsmas. Absolūtā pozīcija tiek aprēķināta attiecībā pret vecāka elementa malām (bet tikai tad, ja tas nav parastās pozīcijas īpašībām position: static).
• fixed - elements tiek absolūti pozicionēts. Ritinot, elements paliek pa vietu.
Pirmie divi veidi ļauj mainīgu pozicionēšanu. Šeit elementi tiek pozicionēti attiecībā pret viens otru. Divi sekojošie piemēri parāda, kā šāda veida pozicionēšana varētu izskatīties:
• Elements 2 tiek novietots 30 pikseļus attālumā attiecībā pret Elementu 1.
• Elements 2 tiek novietots aiz Elementa 1.
Atšķirīga ir situācija ar fixed un static. Ar šiem elementiem var novietot elementus ļoti konkrētās pozīcijās. Pozicionēšanas norādes attiecas uz vecāko vecāku elementu vai pārlūka logu. Viens piemērs:
• Elements 1 tiek novietots tieši 30 pikseļus attālumā no labās un 20 pikseļus attālumā no augšējā pārlūka loga malas.
Tālāk tiks detalizēti izskaidroti dažādie pozicionēšanas veidi. Tomēr vispirms norādījums: Elementu pozicionēšanas kontekstā ir svarīga tā sauktā plūstošā pozīcija. Par šo svarīgo CSS principu es detalizēti pastāstīšu nākamajā apmācības materiālā. Būtībā plūstošā pozīcija attiecas uz to, kā tīmekļa elementi plūst dokumentā. Elementi tiek pārvietoti pēc iespējas tālu noteiktajā virzienā. Ar pozicionēšanas veida palīdzību var skaidri noteikt elementu plūsmu.
Relatīvā pozicionēšana
• Kastes tiek nobīdītas no normālās plūsmas.
• Elementa sākotnējā vieta tiek rezervēta.
Piemērs:
<!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">Izvēlnes 1</div> <div>Izvēlnes 2</div> <div>Izvēlnes 3</div> </body> </html>Šeit ir definētas trīs kastes.
Divas kastes 2 un 3 nav saņēmušas pozicionēšanas norādījumus. Tāpēc tās seko normālai dokumentu plūsmai. Tomēr kaste 1 ir relatīvi pozicionēta. Tādējādi kastes 2 un 3 paliek neietekmētas no Kastes 1. Kastes 1 vietas šīs kastes neaizņem. Izmantojot norādes top, right, left un bottom, notiek kastēm pozicionēšana. Relatīvā pozicionēšana nozīmē, ka tiek ņemta vērā sākotnējā pozīcija dokumentu plūsmā.
• top: 25px - Kaste tiek nobīdīta par 25 pikseļiem uz leju. Kastes normālajā vietā augšpusē tiek pievienoti 25 pikseļi.
• right: 25px - Kaste tiek nobīdīta par 25 pikseļiem pa kreisi. Kastes normālajā vietā pa labi tiek pievienoti 25 pikseļi.
Pikseļu vērtības ir jāuztver attiecībā pret sākotnējo pozīciju. Norādes nosaka kur vērtības tiks pievienotas, tātad augšupm un pa labi. Šis aspekts ir svarīgs. Norādes nenosaka, kurp kārta tiks pārvietota.
Absolūtā pozicionēšana
Turpinot ar absolūto pozicionēšanu. Šī pozicionēšanas veida dēļ elements tiek pilnīgi izņemts no plūsmas. Pārējie elementi lapā uzvedas tā, it kā elements vispār nebūtu klāt.
Piemērs:
<!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">Izvēlnes 1</div> <div>Izvēlnes 2</div> <div>Izvēlnes 3</div> </body> </html>Arī šeit ir definētas trīs kastes. Kaste 1 ir absolūti pozicionēta.
Atšķirībā no relatīvās pozicionēšanas šeit nav rezervēta vieta Kastei 1. Kastes 2 un 3 pārvietojas uz augšu.
Pozicionēšanas norādes top, right, bottom vai left tagad neorientējas vairs pēc Kastes sākotnējās pozīcijas plūsmā. Tā vietā norādes attiecas uz nākamo apjozīgo elementu, kas pozicionēts ar relative, absolute vai fixed. Ja nav apkārtējo elementu, pozicionēšana notiek attiecībā pret lapas augšējo elementu, jeb html.
Pozicionēšana ar fixed
Ar position: fixed var fiksēt elementus. Šeit ir piemērs:
<!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 Part 1</div>
<p>Tikai īsu laiku jaunākais pamācību vai video apmācība tiek piedāvāta tiešsaistes skatījumā vai satura lejupielādes kategorijā par punktiem. Uzziniet vairāk šeit ...</p>
</body>
</html>Fiksētais rūtiņas paliek fiksēta un neskatās virzienā uz leju, bet vienmēr saglabā tās piešķirto pozīciju.
Fiksētajām rūtiņām apkārtējais elements vienmēr ir pārlūka logs.
Lūdzu, ņemiet vērā, ka vecākos pārlūkos ir lielas problēmas ar elementu fiksēšanu. Piemēram, IE6 šeit nedarīs to, ko būtu jādara. Kamēr tiek veikta tīmekļa vietņu optimizācija arī šim pārlūkam, ir divas iespējas:
• Izvairīties no fiksētām rūtiņām.
• Lietot uzlīmes IE pārlūkam.
Ja vēlaties izmantot uzlīmi, iesaku apmeklēt šo vietni http://thestyleworks.de/tut-art/iewinfixed.shtml. Tur ir parādīts, kā izmantot nelielu JavaScript, lai arī šim pārlūkam iegūtu fiksētās rūtiņas.
