Позиционирането може да бъде доста трудно и неприятно! HTML Елементите могат да се припокриват.
Позициониране
Свойствата на CSS за позициониране ви позволяват да орпеделите позицията на даден HTML елемент. Може да ги използвате, за да поставите един елемент зад друг, или да ги припокриете до известна степен. Може и да определите какво да се случи със съдържанието, ако е прекалено голямо. Елементите могат да се позиционират с помощта на top, left, bottom и right пропъртитата. Важно е да знаете, че тези пропъртита няма да работят ако не определите position преди това. Пропъртитата за позиционирате работят по различен начин, в зависимост от стойността на position. Има четири различни методи за позициониране.
Статично позициониране – Static Positioning
HTML елементи са разположени статични по подразбиране. A статично позициониран елемент винаги се позиционира в съответствие с нормалния поток на страницата. Статични разположени елементи, които не са засегнати от горе, долу, ляво, и дясно свойства.
Фиксирано позициониране – Fixed Positioning
Забележка: IE7 и IE8 поддържат фиксната стойност, само ако е определен DOCTYPE!. Фиксираните елементи не зависят от останалата част на страницата, нямат влияние върху flow-a на страницата и не разместват останалите елементи. Това може да се използва при менюта, които искаме винаги да са в определена част на страницата. Те могат да припокриват и други елементи.
Относително позициониране – Relative Positioning
Относително позициониран елемент е позициониран спрямо нормалното си положение.
Съдържанието им може да се размества и да се припокрива с това на други, но все пак заемат място на страницата и зависят от останалите елементи.
Относително разположени елементи често се използват като контейнери за абсолютно разположени елементи.
Абсолютно позициониране – Absolute Positioning
Абсолютната позиция елемент е позициониран спрямо първия parent елемент, който има положение, различно от статично. Ако не се намери такъв елемент, контейнера е <html>:
Абсолютно позиционираните елементи не заемат от мястото на останалите (не влизат в потока с елементи). Документа и останалите елементи се държат все едно не съществуват. Абсолютно позиционираните елементи могат да се припокриват с други елементи.
Припокриващи се Елементи
Когато елементите са разположени извън нормалния поток, те могат да се застъпват с други елементи. Пропъртито Z-index определя реда, по който ще се застъпват елементите – кой елемент е най-отгоре, кой по средата и т.н.. Един елемент може да има положителен или отрицателен z-index:
Един елемент с по-голям z-index е винаги над този с по-малък.
Забележка:Ако два елемента без z-index се припокриват, отгоре ще бъде поставен този, който е написан последен в кода. Причината за това е, че кода се изпълнява последователно, по реда, в който е писан.
Задаване на формата на елемент
Този пример показва как да се определи формата на елемент.
Как да покажем overflow-a на елемент със скролер
Този пример показва как да покажем съдържанието на дадем елемент, когато то е прекалено голямо за да се покаже. Принципно не е препоръчително да се използва скролер защото не изглежда добре, но зависи от целта на сайта ви.
Как да настроите браузъра, за да се справя автоматично с препълването.
Този пример показва как да настроите браузъра автоматично да се справят с препълването.
Промяна на курсора
Този пример показва как да се промени на курсора.
Всички CSS пропъртита за позициониране
| Пропърти | Описание | Стойност |
|---|---|---|
| bottom | Определя долния margin за позициониран елемент | auto length % inherit |
| clip | Clips-ва абсолютно позициониран елемент | shape auto inherit |
| cursor | Определя типа курсор, който да бъде показан | urlauto crosshair default pointer move e-resize ne-resize nw-resize n-resize se-resize sw-resize s-resize w-resize text wait help |
| left | Определя левия margin за позициониран елемент | auto length % inherit |
| overflow | Дефинира какво да се случи ако съдържанието прелее | auto hidden scroll visible inherit |
| position | Specifies the type of positioning for an element | absolute fixed relative static inherit |
| right | Определя десния margin за позициониран елемент | auto length % inherit |
| top | Определя горния margin за позициониран елемент | auto length % inherit |
| z-index | Определя реда на елементите при застъпване | number auto inherit |