Как ще изглежда една интернет страница до голяма степен се определя от това какво е разположението на отделните й елементи. CSS разполага с редица възможности за контрол на позицията на елементите. Доброто познаване на тези CSS команди Ви позволява да  оформите интернет страниците на сайта си точно така, като искате да изглеждат.

Плаващ ефкет (float)

Елементите могат да бъдат разположени плътно вляво или плътно вдясно с използване на свойство float. Например снимка, за която е зададен клас photo, може да бъде получи позиция плътно вляво по следния начин:

.photo {float:left}

В същото време текстът ще се премести, така че плътно да обтича снимката.

Стойности, които може да се използват с float, са:

• left - изместване вляво;
• right - изместване вдясно;
• none - без изместване;

Свойството float често се използва и за оформяне на колони в страницата. За целта съдържанието на всяка колона в HTML кода се огражда с тагове <div> и </div> и след това за всеки div елемент в CSS кода се указва float:left и широчина (width). По този начин първата колона ( първият в HTML кода div елемент) ще се измести вляво, заемайки указаната за нея широчина, след това ще се нареди втората колона и т.н. Ето един конкретен пример за употреба на float:

div.content { float:left; width:400px;}

div.menu { float:left: width:200px;}

Изчистване (clear)

С използването на float автоматично се задава ефект на обтичане - текстът следва формата на плаващия елемент. Ако подобно поведение на текста не е желателно, можете да използвате свойството clear за независимо от плаващия обект разположение на останалите елементи. Clear се използва  със следните стойности:

• none - без ефект, т.е. обтичането на плаващия елемент си продължава;
• left - преустановява се обтичането на плаващ вляво елемент;
• right - не се обтича плаващ вдясно елемент;
• both - няма да се обтичат плаващи както вдясно, така и вляво елементи.

Display - блок, ред, списък, скриване

Според начина, по който се показват на страницата, елементите могат най-общо да се поделят на блокови и редови. Блоковите елементи (заглавията h1~h6, параграфи, div) заемат цялата налична широчина на екрана и винаги имат преди и след себе си автоматично включен знак за край на реда.

Редовите елементи (напр. span, em, a) от своя страна заемат само толкова пространство, колкото им е необходимо и не включват задължителен знак за край на реда.

Свойството display се използва, за да промени начина на показване на дадения елемент. Най-често използваните стойности (които са и най-добре поддържани от браузърите) са:

• block - за представяне на елемента като блоков
• inline - с това елементът получава свойствата на редов елемент
• list-item - елементът ще бъде показан като елемент от списък
• none - елементът няма да бъде показан

Позиция - position

Каква да бъде позицията на елемент на страницата се задава със свойството position и една от стойностите:

• static - стойността по подразбиране. Елементите се разполагат по реда на задаването им в HTML кода. Ако е избрана позиция static, то зададени с left, top, right, bottom стойности са невалидни.
• absolute - позицията на елемента се определя еднозначно от стойностите, зададени с left, top, right, bottom. Изключение е случая, когато родителския елемент е с позиция, различна от static. Тогава позицията на елемента е относителна спрямо родителския елемент.
• relative - Стойностите, зададени с left, top, right, bottom, се използват за отместване на елемента от нормалната му позиция.
• fixed - елементът ще си остане на указаното с left, top, right, bottom място, дори и при превъртане (скролиране) на страницата.

Ляво, дясно, горе, долу (left, right, top,  bottom)

Тези свойства се използват съвместно с position при определяне позицията на страницата, на която да бъде поставен дадения елемент. За стойности на left, right, top и bottom може да се използват числа с мерните им единици (px, em и т.н.), проценти или ключовата дума auto.

Overflow

Понякога елементите може да се окажат по-големи от зададената им широчина или височина. Какво да се прави с частта от елемента, излизаща извън зададените му размери, се контролира със свойството overflow. Освен това, overflow често се използва, за да добави плъзгач към елемент.

Overflow може да се използва със следните стойности:

• visible - независимо от указаните размери, излизащата извън тях част на елемента ще бъде показана.
• hidden - ако някоя част излиза извън зададените за елемента размери, тя ще бъде невидима
• scroll - независимо дали елементът е по-голям от зададените му размери или не, ще бъде добавен плъзгач. Ако има излизаща извън размерите на елемента част, тя ще бъде видима при превъртане (скролиране) на елемента
• auto - ако елементът е по-голям от зададените му размери, автоматично се добавя плъзгач, а в противен случай плъзгач не се показва.

Наслагване на елементи - z-index

Използвайки подходящи стойности за position, можете да наслагвате един върху друг елементи. В такъв случай колкото по-късно в HTML кода е описан даден елемент, на толкова по-предна позиция ще се намира.

Можете да промените реда на наслагване със свойството z-index. За стойности на z-index се използват цели числа - колкото по-голям е z-index числото за даден елемент, толкова по-предна ще бъде позицията му. Стойност на z-index може да бъде и ключовата дума auto. В този случай позицията на елемента ще бъде определен както обикновено - според реда на споменаване на елемента в HTML кода.