Četvrti čas – Pozicije

Dragan Filipović Korak po korak, Kurs Comments (0)

Postoje tri vrste pozicija: Relativna, Apsolutna i Fiksna

CSS-osobina position, vrednosti su relative, absolute i fixed. npr (position:fixed;)

Pored dodavanja osobine position, moramo dodati i offset, odnosno vrednosti te pozicije u odnosu na druge elemente.

Offset osobine su left, right, top i bottom. Ne možemo koristiti left i right u isto vreme, jer je nemoguće da element stoji i levo i desno.

npr:

.neki-element {
	position:fixed;
	left:156px;
	top:238px;
	
	width:100px;
	height:100px;
}

 Element će biti fiksiran i udaljen 156px od leve strane i 238px od vrha.

Relativna pozicija

Retko se koristi samostalno.

relativno_poz

 

Normal Flow i Relativno poziciniranje

Boks 1 koristi relativno pozicioniranje da bi se pomerio udesno za 120px u odnosu na njegovu startnu poziciju. Boks 2 i Boks 3 ostaju u istom mestu, nepromenjene pozicije, (ponašaju se kao da Boks 1 nije ni promenio poziciju, tj. kao da je ostao na istom mestu) jer relativno pozicioniranje ne pomera elemente iz Normal Flow-a.

Apsolutna pozicija

Elementi sa svojstvom position:absolute se uklanjaju tj. pomeraju iz Normal Flow-a i ne utiču na ostale elemente. Pozicija elemenata se određuje na osnovu Offset vrednosti koje mogu biti Left, Right, Top i Bottom. Ove vrednosti se ponašaju skoro isto kao i kod relativnog pozicioniranja, sem što se kod apsolutnog pozicioniranja element pomera u odnosu na Parent element koji je takođe pozicioniran tj. kome je dodeljeno svojstvo position. Apsolutno pozicioniranje nam dozvoljava da definišemo gde element treba da bude pozicioniran (apsolutno u odnosu na stranicu ili u odnosu na Parent element koji isto ima positioning atribut).

apsolutno_poz

Boks 1 je apsolutno pozicioniran, Left i Top svojstva ga pomeraju na desno i dole, a Boks 2 i Boks 3 se ponašaju kao da Boks 1 ni ne postoji i zauzimaju njegovu poziciju u Normal Flow-u. Zbog svoje nove pozicije Boks 1 se preklapa sa Boksom 3 i bilo koja promena u sadržaju Boksa 3 ne utiče na poziciju ostala dva elementa.

Apsolutna pozicija se nasčešće koristi za dva ili više elemenata (Parent element – okvir i Child elementi koji se u njemu nalaze).

Okvirni element treba imati relativnu poziciju, bez ofseta (pomeranja levo, desno isl). Unutrašnji elementi se mogu pomerati u odnosu na okvi pomoću apsolutne pozicije.

Zadatak:

poz3

 Pozicije ćemo vežbati na novoj strani.

1. Napravimo novu stranu i snimimo pod imenom vezba-pozicije.html

2. Povežemo ranije napravljeni CSS – vezba.css

3. U CSS-u napravimo formate za elemente (prvo napravimo osnovne formate – dimenzije i boju)

/* Apsolutna pozicija */
.proizvod {
	width:500px;
	height:400px;
	background:#fc7f05;
}
.cena {
	width:100px;
	height:100px;
	background:#237a26;
}

 4. U HTML-u napravimo elemente

<div class="proizvod">
  <div class="cena">Content for  class "cena" Goes Here</div>
</div>

 pozicije

 5. Da bi cenu pomerili u gornje desno ćoše koristićemo pozicije. Proizvod će imati relativnu poziciju, a cena apsolutnu. Cenu ćemo pomerati u odnosu na ivice proizvoda. Ofset osobine (left, right, top i bottom) mogu imati i negativne vrednosti. Pozitivne vrednosti pomeraju element ka unutrašnjosti okvirnog elementa, a negativne ka spolja.

Cena će se pomeriti za polovinu svoje visine ka gore (top:-50px) i za 450px na levo (širina proizvoda – polovina širine cene)

/* Apsolutna pozicija */
.proizvod {
	width:500px;
	height:400px;
	background:#fc7f05;
	position:relative;
}
.cena {
	width:100px;
	height:100px;
	background:#237a26;
	position:absolute;
	top:-50px;
	left:450px;
}

 U DW elemente koji imaju apsolutnu poziciju možemo pomerati i mišem, ofset pomeranja se automatski menja.

U DIV-u cena ukucaćemo novi tekst 100din. umesto postojećeg Content for  class "cena" Goes Here

poz2

 

Kako bi bolje videli sve lemente proizvodu ćemo dodeliti margine margin:0 auto; Takođe ćemo centrirati tekst i napraviti krug pomoću border-radius-a.

Pogledajte krajnji rezultat.

Fiksna pozicija

Fiksno pozicioniranje je specijalan način apsolutnog pozicioniranja. Kada se skroluje stranica, fiksiran element se ne pomera kao i svi ostali elementi.  Element ostaje fiksiran tako da, kada skrolujete kroz stranicu, ostaje u jednom mestu.

Odnosno elementu se dodaje position:fixed, a ofset vrednosti ga pomeraju u odnosu na ekran. Na toj poziciji element ostaje fiksiran kada skrolujemo stranu.

Fiksne elemente treba postavljati na kraj (ili početak) strane, obzirom da njihova pozicija ne zavisi od redosleda unutar sajta, već od ofset vrednosti.

Zadatak

Fiksirati element sa slikom facebook.png uz levu ivicu ekrana

1. U CSS-u spremimo format

.facebook {
	background-image:url(../images/facebook.png);
	width:70px;
	height:70px;
	
	position:fixed;
	left:0;
	top:400px;
}

 2. U HTML-u ubacimo element na dno strane (van glavne tabele)

  <div id="futer">Copyright blabla.com, Dizajnirao/la Pera Perić</div>
  <!-- Kraj #futer -->
</div>
  <!-- Kraj #glavna-tabela -->
<div class="facebook"></div>
</body>
</html>

 Pogledajte krajnji rezultat

Zadatak

Postaviti fiksni baner sa reklamom uz levu ivicu sajta (kao na sqajtu blica i mnogih drugih sajtova).

U ovom slučaju ne možemo znati udaljenje od leve strane monitora, obzirom na različite rezolucije monitora. Pomeranje moramo raditi u odnosu na sajt. Ali fiksna pozicija može da se odredi samo u odnosu na monitor. Jedino mesto na sajtu koje je jednako udaljeno od ivice monitora, bez obzira na rezoluciju je sredina sajta, ona jeuvek udaljena 50% od leve i/ili desne strane ekrana. Osim piksela, procenti se često koriste za dimenzije. Kada element postavimo na sredinu sajta, marginama ga možemo pomeriti gde želimo , obzirom da su nam sve dimenzije poznate, računajući od sredine sajta.

Element ćemo fiksno postaviti udaljen za 50% od desne ivice ekrana, a marginom ćemo ga postaviti uz ivicu sajta (udaljićemo ga od sredine za polovinu širine sajta)

.reklama {
	background-image:url(../images/reklama-levo.jpg);
	width:400px;
	height:900px;
	
	position:fixed;
	right:50%;
	top:0;
	
	margin-right:400px;
}

 U html-u sve fiksne elemente postavljamo na kraj strane.

<div class="reklama">Content for  class "reklama" Goes Here</div>
</body>

 Pogledajte krajnji rezultat

 

 

Comments (0) Trackback from your site.

Dragan Filipović

Predavač na Kursu Web Dizajna - Web edukator.

Ostavi komentar

Morate biti prijavljeni da biste dodali komentar.