Различни видове позициониране в CSS
В днешния урок ще научите за различните видове позициониране в CSS.
Много начинаещи уебмастъри знаят за съществуването на различни видове позициониране за представяне на данни на уеб страници.
Общо има 4 вида позициониране: абсолютно, фиксирано, относително и статично. Те се различават значително един от друг. Всеки от тях е много полезен и ако се използва правилно, винаги ще получите желания резултат.
Една важна концепция, която трябва да се разбере при работа с позициониране, е, че всички елементи на страницата са блокове. Грубо казано, правоъгълниците са направени от пиксели. Това означава, че на всеки блок може да се присвои както височина, така и ширина в пиксели. Блоковете (елементи) също са вградени. Те също са под формата на правоъгълници, но са на страницата малко по-различно. Те се нареждат един след друг хоризонтално.
След като решихме за себе си, че всеки елемент на страницата е блок, можем да говорим за видовете позициониране и как те ще ни помогнат да постигнем желания резултат (т.е. поставете всеки блок там, където ни е необходим).
- СТАТИЧНА. Това е по подразбиране за всеки елемент на страницата. Това е най-простият тип и не означава почти нищо. Всичко изглежда така, както трябва да изглежда.
- СРОДНИ. Този тип позициониране е най-трудно и неправилно използвано. Ако ВИЕ дадете позицията на елемента: относителна; но не давате никакви други атрибути (отгоре, отляво, отдолу или отдясно), тогава нищо не се променя. Всичко ще остане на мястото си (точно като първия тип позициониране). Но ако добавите атрибути (например, top: 10px), тогава елементът ще се премести с 10 пиксела надолу от мястото, където обикновено би бил. Това е много полезно при подравняване на елементи на формуляра в един ред.