CSS pozicijos

Lukas

Su css kalba galime keisti elementų išdėstymo tvarką. Yra keturi pozicijų variantai: statiškas, reliatyvvus, fiksuotas arba absoliutus. Vieną iš jų reikia nurodyti kiekvienam elementui per parametrą position. Pradinė visu elementų parametro position reikšmė yra static.

Statinė pozicija - position: static;

Kai elementai yra position:static; jie yra atvaizduojami paprastai, tiesiog toje vietoje, kurioje jie yra html kode. Statinių elementų negalime paveikti papildomais pozicijos nustatymais tokiais kaip top, right, bottom, left, margin, padding. Su position:static; margin ir padding nustatymai veiks dalinai.

Reliatyvi pozicija - position: relative;

Kai elementas yra position:relative; jis yra realiatyvioje savo pozicijoje, tai yra be papildomų nustatymų tokioje pat kaip ir static, tačiau jei pridėsime kokį nors papildomą pozicijos nustatymą, jo pozicija realiatyviai pasikeis nuo pradinės, statinės pozicijos.

Jei reikia elementą galime pastumpti į kurią nors pusę su nustatymais top, right, bottom ar left. Jei reikia, galime juos lygiuoti per centrą, atitraukti nuo kraštų su parametrais margin ir padding.

/* bendri nustatymai */
div {
  width:200px;
  height:35px;
  position:relative;
  line-height:35px;
  text-align:center;
  color: #fff;
}
 
/* individualus nustatymai */
 
div.pirmas{
  background-color: #32c3ef;
  left: 10px;
}
div.antras{
  background-color: #ea4ce1;
  left: -10px;
}
div.trecias{
  background-color: #f00404;
}
div.ketvirtas{
  background-color: #efe714;
  top: 10px;
}
div.penktas{
  background-color: #4d5575;
  bottom: -5px;
  left: 50px;
}
div.sestas{
  background-color: #3de6bc;
  margin: 0px auto;
}

Fiksuota pozicija - position:fixed;

Kai elementas yra fiksuotas, tada kur nurodysime jo vietą su papildomais parametrais, ten jis ir bus. Tokiu būdu galime sukurti elementus, kurie yra matomi visada, nepaisant ar puslapis telpa į naršyklės langą, ar atsiranda slinkties juostos.

/* bendri nustatymai */
div {
	width:200px;
	height:50px;
	position:fixed;
	line-height:50px;
	font-size: 15px;
	text-align:center;
	font-weight: bold;
	color: #000;
	opacity: 0.5;
	filter:alpha(opacity=50);
}
 
/* individualus nustatymai */
 
div.pirmas{
	background-color: #32c3ef;
	left: 30px;
	top: 120px;
}
div.antras{
	background-color: #ea4ce1;
	right: 10px;
	top: 200px;
}
div.trecias{
	background-color: #f00404;
}
div.ketvirtas{
	background-color: #efe714;
	top: 10px;
	right: 10px;
}
div.penktas{
	background-color: #4d5575;
	bottom: 10px;
	left: 10px;
}

Absoliuti pozicija - position: absolute;

Elementai su absoliučia pozicija yra atvaizduojami realiatyviai pagal tėvinį elementą, kuris nėra statiškas, jei tokio elemento nėra, tada pagal <html> elementą. Absoliučios pozicijos elementai nebeužema savo statiškos vietos, todėl jų vietą gali užimti kiti elementai, beto absoliučios pozicijos elementai, panaudojus z-index parametrą, gali būti virš arba po kitais elementais.

/* bendri nustatymai */
div {
	width:220px;
	height:50px;
	position:absolute;
	line-height:50px;
	font-size: 15px;
	text-align:center;
	font-weight: bold;
	color: #000;
}
 
/* individualus nustatymai */
 
div.pirmas{
	background-color: #32c3ef;
	left: 30px;
	top: 120px;
}
div.antras{
	background-color: #ea4ce1;
	right: 10px;
	top: 200px;
}
div.trecias{
	background-color: #f00404;
}