Sākumlapa
"Pirmā web lapa"
HTML
Citi materiāli

Ceļošana - kalni

CSS

Sintakse
Sasaiste ar HTML
Kategorijas un ID
Šrifts
Teksts
Fons
Saraksta     noformējums
Saites
Kastes
Pozicionēšana

Vēl iesaku:

W3Schools
Krāsu palete

Pārlūku atbalsts CSS
 (1),   (2) 

Ievads absolūtajā pozicionēšanā (position:absolute)

Īpašības position vērtība nosaka katra elementa "kastītes" (skat.iepriekšējā nodaļā) novietojumu pārlūkprogrammas logā un sadarbību ar citām elementu kastītēm. Noklusētā pozīcijas vērtība ir "statiska" (position: static), kā rezultātā "kastītes" tiek novietotas viena zem otras. Kā zināms, īpašību ar noklusēto vērtību var nenorādīt.

Norādot pozicionēšanas vērtību kā absolūtu (position: absolute), "kastīte" sāk uzvesties "neatkarīgi" - tā tiek izrauta no statisko (!!!) kastīšu plūduma un novietota mūsu definētajās "koordinātās". Faktiski novietošana paredzētajā vietā notiek ar papildus īpašību top, bottom, left, right vērtību palīdzību, nosakot vēlamo attālumu no augšas, apakšas, kreisās vai labās malas. Tiesa, ir kāds izņēmums - ja minētā kastīte (child) ir ievietota citā kastītē (parent), kurai pozicionēšanas vērtība nav statiska (!!!), bet gan jebkura cita (absolute, float), tad bērna kastītes novietojums tiks rēķināts atbilstoši vecāka kastītei!

Absolūti pozicionētu kastīšu saturs var pārklāties - svarīgs ir tikai to novietojuma atskaites punkts, t.i., kas ir minētās kastītes vecāks (parent). Tātad - ja vajadzīgā kastīte nav ievietota citā "ne statiski" pozicionētā elemantā, tad tās vecāks ir pārlūkprogrammas logs :)

CSS kods..

#k1 {position:absolute;
top:15%; right:20%;
width: 300px;
background-color: #FFCC99;
border: 1px solid black}

#k2 {position:absolute;
bottom:80px; right:20px;
width: 400px;
background-color: #FFCC99;
border: 1px solid black}

#k3 {position:absolute;
top:55px; left:55px;
width: 300px;
background-color: #FFCCCC;
border: 1px solid black}

p.statiskas {width: 300px; background-color: white; border: 1px solid black}

..HTML kods..

<p class="statiskas">Nr.1! Statiska kastīte. Statiska kastīte. Statiska kastīte. Statiska kastīte. Statiska kastīte. Statiska kastīte. Statiska kastīte. Statiska kastīte. Statiska kastīte. Statiska kastīte. Statiska kastīte. Statiska kastīte. Statiska kastīte. Statiska kastīte. Statiska kastīte. Statiska kastīte. Statiska kastīte.</p>

<p class="statiskas">Nr.2! Statiska kastīte. Statiska kastīte. Statiska kastīte. Statiska kastīte. Statiska kastīte. Statiska kastīte. Statiska kastīte. Statiska kastīte. Statiska kastīte. Statiska kastīte. Statiska kastīte. Statiska kastīte. Statiska kastīte. Statiska kastīte. Statiska kastīte. Statiska kastīte. Statiska kastīte.</p>

<p id="k1">Absolūti pozicionēta kastīte Nr.1 (15% attālumā no pārlūkprogrammas loga augšas un 20% attālumā no labās malas. Procenti tiek rēķināti no pārlūkprogrammas loga patreizējā augstuma un platuma, kas tiek pieņemts par 100 procentiem)</p>

<div id="k2">
  <p>DIV-s ir absolūti pozicionēta kastīte Nr.2. - vecāks (parent) visiem tajā ietvertajiem elementiem, tajā skaitā šai rindkopai un trešajai kastītei</p>

  <p id="k3">Absolūti pozicionēta kastīte Nr.3. Šī rindkopa ir bērns (child) 2.absolūtajai kastītei (DIV-am) (55px attālumā no vecāka (parent) augšas un kreisās malas)</p>
</div>

<p class="statiskas">Nr.3! Statiska kastīte. Statiska kastīte. Statiska kastīte. Statiska kastīte. Statiska kastīte. Statiska kastīte. Statiska kastīte. Statiska kastīte. Statiska kastīte. Statiska kastīte. Statiska kastīte. Statiska kastīte. Statiska kastīte. Statiska kastīte. Statiska kastīte. Statiska kastīte. Statiska kastīte.</p>

..rezultāts (pieņemot, ka zilais ir pārlūkprogrammas logs)!

Nr.1! Statiska kastīte. Statiska kastīte. Statiska kastīte. Statiska kastīte. Statiska kastīte. Statiska kastīte. Statiska kastīte. Statiska kastīte. Statiska kastīte. Statiska kastīte. Statiska kastīte. Statiska kastīte. Statiska kastīte. Statiska kastīte. Statiska kastīte. Statiska kastīte. Statiska kastīte.

Nr.2! Statiska kastīte. Statiska kastīte. Statiska kastīte. Statiska kastīte. Statiska kastīte. Statiska kastīte. Statiska kastīte. Statiska kastīte. Statiska kastīte. Statiska kastīte. Statiska kastīte. Statiska kastīte. Statiska kastīte. Statiska kastīte. Statiska kastīte. Statiska kastīte. Statiska kastīte.

Absolūti pozicionēta kastīte Nr.1 (15% attālumā no pārlūkprogrammas loga augšas un 20% attālumā no labās malas. Procenti tiek rēķināti no pārlūkprogrammas loga patreizējā augstuma un platuma, kas tiek pieņemts par 100 procentiem)

DIV-s ir absolūti pozicionēta kastīte Nr.2. - vecāks (parent) visiem tajā ietvertajiem elementiem, tajā skaitā šai rindkopai un trešajai kastītei

Absolūti pozicionēta kastīte Nr.3. Šī rindkopa ir bērns (child) 2.absolūtajai kastītei (DIV-am) (55px attālumā no vecāka (parent) augšas un kreisās malas)

Nr.3! Statiska kastīte. Statiska kastīte. Statiska kastīte. Statiska kastīte. Statiska kastīte. Statiska kastīte. Statiska kastīte. Statiska kastīte. Statiska kastīte. Statiska kastīte. Statiska kastīte. Statiska kastīte. Statiska kastīte. Statiska kastīte. Statiska kastīte. Statiska kastīte. Statiska kastīte.

Klase "statiskas" šoreiz tiek lietota tikai, lai piemērotu ierobežotu platumu, fona krāsu un kontūrlīnijas uzskatāmības labad.




Autortiesības © 2005-2011, kasis.lv. Visas tiesības aizsargātas.