Позиционирањето на CSS е повеќе од само X, Y координати
Позиционирањето на CSS одамна е важен дел за креирање на веб-страници. Дури и со појавата на нови CSS распоред техники како Flexbox и CSS Grid, позиционирањето сеуште има важно место во секоја кеса на веб дизајнер со трикови.
Кога користите позиционирање на CSS, првото нешто што ќе треба да направите е да се воспостави сопственост на CSS за позиција за да му каже на прелистувачот, ако планирате да користите апсолутно или релативно позиционирање за даден елемент. Исто така, треба јасно да ја разберете разликата помеѓу овие две својства за позиционирање.
Додека апсолутната и релативната се две карактеристики на CSS својства најчесто користени во веб-дизајнот, всушност има четири држави во сопственост на позиција:
- статичен
- апсолутно
- роднина
- фиксна
Static е стандардна позиција за секој елемент на веб-страница. Ако не ја дефинирате позицијата на елементот, таа ќе биде статична. Ова значи дека ќе се прикаже на екранот врз основа на тоа каде е во HTML-документот и како ќе се прикаже во нормалниот тек на тој документ.
Ако ги примените правилата за позиционирање како врвот или лево кон елемент кој има статичка позиција, тие правила ќе бидат игнорирани и елементот ќе остане таму каде што се појавува во нормален проток на документи. Всушност, ретко, ако некогаш, треба да поставите елемент на статичка позиција во CSS, бидејќи тоа е стандардната вредност.
Апсолутно позиционирање на CSS
Апсолутно позиционирање веројатно е најлесната CSS позиција да се разбере. Започнувате со оваа CSS сопственост:
позиција: апсолутна;Оваа вредност му кажува на прелистувачот дека се што треба да биде позиционирано треба да се отстрани од нормалниот проток на документот и наместо тоа да се стави на точната локација на страницата. Ова се пресметува врз основа на најблискиот не-статички позициониран предок на елементот.
Бидејќи апсолутно поставениот елемент е изваден од нормалниот проток на документот, тој нема да влијае на тоа како елементите пред него или после тоа во HTML се поставени на веб-страницата.
Како пример - ако сте имале поделба која била позиционирана користејќи вредност од роднина (наскоро ќе ја погледнеме оваа вредност), а во таа поделба сте имале став дека сакате да поставите 50 пиксели од врвот на поделбата, можете ќе додаде позитивна вредност на "апсолутна" на тој став заедно со офсет вредност од 50 пиксели на "врвот" имот, вака.
позиција: апсолутна; горната: 50px;Овој апсолутно позициониран елемент тогаш секогаш ќе прикажува 50 пиксели од врвот на таа релативно позиционирана поделба - без разлика што друго се прикажува таму во нормален проток. Вашиот "апсолутно" позициониран елемент го користеше релативно позиционираниот како свој контекст, а вредноста на позицијата што ја користите е релативна со тоа.
Четирите својства за позиционирање што ги имате на располагање се:
- врв
- право
- дното
- лево
Можете да ги користите или врвот или дното (бидејќи елементот не може да се позиционира според двете вредности) и десно или лево.
Ако некој елемент е поставен на позиција на апсолутна, но таму нема непостизирани позиционирани предци, тогаш ќе биде позициониран во однос на елементот на телото, кој е елемент од највисоко ниво на страницата.
Релативно позиционирање
Веќе споменавме релативно позиционирање, па да го разгледаме тој имот сега.
Релативното позиционирање ги користи истите четири својства на позиционирање како апсолутно позиционирање, но наместо да ја заснова позицијата на елементот врз неговиот најблизок не-статички позициониран предок, почнува од каде што елементот би бил ако се уште бил во нормален проток.
На пример, ако имате три параграфи на вашата веб-страница, а третата има поставено "позитивна: роднина" стил, позицијата ќе биде надоместена врз основа на неговата моментална локација.
Став 1.
Параграф 2.
Paragraph 3.
Во горенаведениот пример, третиот став ќе биде поставен 2em од левата страна на садот елемент, но сепак ќе биде под првите два параграфи. Тоа ќе остане во нормалниот проток на документот, и само да се надомести малку. Ако го промените во позиција: апсолутна; сè што следи ќе се прикаже на врвот од неа, бидејќи повеќе нема да биде во нормалниот проток на документот.
Елементи на веб-страница често се користат за одредување на вредноста на позицијата: роднина без утврдена вредност на офсет, што значи дека елементот останува токму таму каде што ќе се појави во нормален проток. Ова се прави единствено за да се утврди тој елемент како контекст против кој други елементи може да се постават апсолутно. На пример, ако имате поделба околу целата своја веб-страница со класа вредност на "контејнер" (што е многу честа сценарио во веб-дизајнот), таа поделба може да се постави на положба на роднина, така што нешто внатре во него може да се користи тоа како контекст за позиционирање.
Што е фиксирано позиционирање?
Фиксираното позиционирање е многу слично на апсолутно позиционирање. Позицијата на елементот се пресметува на ист начин како апсолутниот модел, но фиксните елементи потоа се фиксираат на таа локација - речиси како воден печат . Сè друго на страницата потоа ќе се лизга минатото елемент.
За да ја користите оваа вредност на имотот, ќе поставите:
позиција: фиксна;Имајте на ум, кога ќе поправите елемент на место на вашата страница, тој ќе печати на таа локација кога ќе биде отпечатена вашата веб страница. На пример, ако вашиот елемент е фиксиран на врвот на вашата страница, тој ќе се појави на врвот на секоја испечатена страница - затоа што е фиксирана до врвот на страницата. Можете да ги користите типовите на медиуми за да промените како печатените страници прикажуваат фиксни елементи:
@media екран {h1 # прв {позиција: фиксен; }} @media print {h1 # first {position: static; }}Авторски напис од Џенифер Крајнин. Уредено од Џереми Жирар на 1/7/16.