вторник, 6 януари 2015 г.

CSS позициониране

Дълго време във всички уеб сайтове са се използвали таблици (<table> тагове) за изграждане подредбата на съдържанието. Този метод отдавна се счита за остарял, а препоръчаните техники са свързани с така наречените "контейнери" - div таговете.
Какво представлява <div> елемента? - Сам по себе си един div елемент не е много по-различен от един най обикновен параграф (<p> таг). Разликата се състои в това, че параграфа може да съдържа текст, а div елемента - по-общи елементи или комбинация от повече елементи. Целта е чрез наслагване и стилизиране да подредим страницата така, както искаме да изглежда. Div елемента е блоков, т.е. след себе си и преди себе си оставя нов ред.
Как се използва? - В комбинация с CSS стилове. Възможни са различни подредби на сайтове, но в общи линии възможностите за реализация се свеждат до абсолютно или относително позициониране и използване на плаващи елементи (чрез стойността на float селектора за дадения компонент).

Видове позициониране
1.Position:absolute;
При това позициониране, обекта се намира на точното място независимо как се разширява екрана или с кой браузър сте! Понякога обаче, обекта не се мести за разлика от другите елементи при разширяване на екрана и може да има проблеми.
ПРИМЕР:
 имаме един <div class="pos">Хей.....премести ме</div>
CSS ще е : 
.pos {

position:absolute;

 top:100px;

 left:100px; }

2.position:realative;
Това позициониране позиционира елементите близо до първоначалната позиция.
3.position:fixed;
Това позициониране позиционира елемента точно на мястото, на което е дори, когато страницата се премести надолу (със скролбар), например като чата на фейсбук.
ПРИМЕР:
 имаме един <div class="pos">Хей.....премести ме</div>
CSS ще е :

.pos{

position:fixed;

top:100px;


left:100px;}

ПРИМЕР: