Како да се користи CSS позиционирање при креирање на шаблон на веб страна

Објавено на Posted in CSS

За да се постави некој елемент на шаблон за веб страница може да се искористат следните пет вредности за својството CSS position: static, absolute, relative, fixed и sticky. Својството CSS position контролира каде ќе се прикаже некој елемент на веб страната. Местото на кое ќе се прикаже некој елемент може да се определи и со користење на својствата: top, right, bottom, left и z-index.

  1. Статичко позиционирање

Position: static е стандардна вредност за некој елемент во шаблонот на веб страната. Ако не го дефинирате својството position во CSS за некој елемент, тогаш тоа автоматски ќе се постави на static. Елементите кои се статички позиционирани ќе се појават на страницата во нормален ток. На пример, ако имате повеќе <div> елементи еден по друг, тие ќе се појавуваат на страницата директно еден по друг. Ова може да се прикаже со следниот HTML markup

<div class="first"></div>
<div class="another"></div>

и CSS.

.first { 
   // За елементот не е поставено својството position , а тоа значи вредноста е static 
} 
.another { 
   // не е поставено својството position , а тоа значи вредноста е static 

   top: 50px; 
}

За вториот елемент својството top е поставено на 50px. Очекувањето е дека тој ќе се помести надолу за 50px. Но, тоа не се случува. Бидејќи двата елемента имаат static position ниту едно CSS својство ќе направи нешто. Затоа својството top не влијае на приказот на вториот елемент. Вториот елемент се поставува веднаш под првиот без да има место меѓу нив.

static
Погледнете го целиот код во Codepen
  1. Релативно позиционирање

Position: relative е слична на статичкото позиционирање во тоа што релативно позиционираните елементи ќе го следат нормалниот тек на веб-страницата. Но, главната разлика е во тоа што употребата на relative position ќе ги отклучи другите CSS својства за распоред на елементите. Елементот што треба да се позиционира го поставуваме position relative во однос на другите елементи на страницата. CSS сега ќе биде:

.first { 
   position: static; 
} 
.another { 
   position: relative; 
   top: 50px; 
}

Position relative за вториот елемент прави својството top: 50px  да функционира. Вториот елемент се поставува 50px под првиот елемент.

position-relative

Погледнете го целиот код во Codepen

Релативно позиционирање на два елементи, родител и дете

Да разгледаме два елемента со релативно позиционирање од кои едниот елемент – дете е вгнезден во другиот елемент – родител.

HTML:

<div class="parent "> 
   <div class="child "></div> 
</div>

CSS:

.parent {  
	  position: relative;
	}
	.child {
	  position: relative;
	  top: 0;
	  left: 0;
	}
Погледнете го целот код во Codepen
  1. Апсолутно позиционирање

При користење на статичко или релативно позиционирање, елементите се прикажуваат едно под друго, во зависност од нивниот редослед во HTML кодот. Но, со апсолутно позиционирање, елементот е целосно изваден од тој нормален тек на веб-страницата.

За да се разгледа апсолутното позиционирање го менуваме позиционирањето на елементот – дете од релативно во апсолутно позиционирање.

.parent {  
	  position: relative;
	}
	.child {
	  position: absolute;
	  top: 0;
	  left: 0;
	}
Погледнете го целиот код во Codepen

Елементот дете сеуште е во рамките на елементот родител, но сега е поставен сосема лево и горе покривајќи ја содржината на текстот на елементот родител. Ова е резултат на апсолутното позиционирање и на стилот top: 0px и left: 0px на елементот дете. Во нормалниот тек на нештата, елементите не би биле на врвот и не би прекривале други елементи. Бидејќи елементот дете е апсолутно позициониран, тој во суштина се наоѓа на различен слој од нормалните елементи. Затоа може да се позиционира врз било што друго што е на веб-страницата. Но, тој ќе остане во рамките на границите на родителскиот елемент – се додека родителот има поставена позиција.

Апсолутно позиционираниот елемент треба да се позиционира во однос на позициониран предок. Кога некој елемент се издвојува од нормалниот тек користејќи го апсолутното позиционирање, тој елемент го бара предокот кој има сопствена позиција во однос на која тој треба да се позиционира.

Да разгледаме што се случува ако елемент дете е апсолутно позициониран, но родителскиот елемент нема поставено позиција?

Еве го CSS кодот:

.parent { 
   // No position set, so it's static 
} 
.child { 
   position: absolute; 
   top: 0px; 
   left: 0px; 
}

На следната слика е прикажан изгледот на веб страната.

Погледнете го целиот код во Codepen

Елементот дете сега излегол од границите на родителскиот елемент, бидејќи елементот родител нема поставено позиција. Елементот дете се позиционирал на следниот родителски елемент, во овој случај на елементот <body> и таа позиција е најдалечна позиција до која може да оди.

Позиционорањето fixed и sticky се слични на апсолутното позиционирање, но тие се поврзани и со скролувањето на страницата.

  1. Фиксно позиционирање

Фиксното позиционирање го вади елементот од нормалниот тек и го поставува на исто место во видливото поле на екранот (viewport). Тоа значи дека скролувањето воопшто нема да влијае на неговата позиција.

HTML код:

<div class="first purple"> 
   Lorem ipsum dolor sit amet, consectetur adipiscing elit....
</div> 
<div class="another green"></div>

CSS код:

.first { 
   position: relative; 
} 
.another { 
   position: fixed; 
   top: 0px; 
   left: 0px; 
}
Погледнете го целиот код во Codepen

Фиксно позиционираниот елемент ќе остане позициониран на горниот и левиот агол на видното поле на страницата (viewport). Ако скролуваме, релативно позицираниот елемент ќе се движи нормално, но фиксно позицираниот елемент ќе остане заглавен на местото каде што сме го сместиле.

Забелешка: фиксно позицираниот елемент мора да има поставена горната или долната положба. Ако не, тој воопшто нема да се прикаже на страната.

Фиксно позициинираните елементи често се користат за правење на навигациско мени.

  1. Леплива позиција – Sticky

Елементите на кои е поставено position: sticky првично ќе се однесуваат како елементи со position: relative, но ако скролувате, тие ќе бидат извадени од нормалниот тек на страницата и ќе се однесуваат како фиксно позиционирани таму каде што се поставени.

Разгледуваме еден елемент со жолта позадина на кој е поставен position: sticky и се наоѓа меѓу други два елемента кои содржат многу текст.

HTML код:

<div class="first"> 
   Lorem ipsum dolor sit amet, consectetur adipiscing elit.... 
</div> 
<div class="green"></div> 
<div class="another"> 
   Lorem ipsum dolor sit amet, consectetur adipiscing elit.... 
</div>

CSS код:

.first {  
	  position: relative;
	}

	.another {
	  position: sticky;
	  top: 0;
	}

При скролување надолу по страницата, кога ќе се види жолтиот елемент на страницата, тој изгледа како нормален, релативно позициониран елемент. Но, ако продолжиме да скролуваме надолу, наместо да се движи со страната, тој ќе остане фиксен и ќе се држи до врвот на видното поле на страната (viewport).

Погледнете го целиот код во Codepen

Елементите со position sticky исто како и елементите со position: absolute мора да имаат поставено top или bootom css својство. Ако не е поставено top или bottom css својство,  тогаш елементот ќе продолжи да се однесува како да е релативно позициониран и никогаш нема да стане леплив.

Rada Arshinkovska

I create modern, high quality, responsive search engine friendly websites, beautifully crafted for my client needs and wishes. I build websites for individuals, businesses and organizations that have never had one, but also, for those who need help with redesigning their websites.

Напишете коментар

Вашата адреса за е-пошта нема да биде објавена. Задолжителните полиња се означени со *

3 × one =