Уроци по уеб дизайн

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

. Възможни стойности на свойствата

  • статично позиционира елемента по обичайния начин - статично. Всички елементи, с които сме работили досега, са позиционирани статично. С други думи, ако елементът не е позициониран по някакъв специален начин, той е позициониран статично.
  • относително отмества елемента спрямо първоначалното му положение. Разпределеното за елемента пространство се запазва и остава празно.
  • абсолютни позиционира елемента в точката с абсолютни координати спрямо родителския елемент.

Нека разгледаме по-отблизо всички опции.

Статично разположение

При статично разположение елементът е там, където трябва да бъде по подразбиране на уеб страницата. За статично разположен елемент не е възможно да се задават координати.

Статичното местоположение се задава от стойността на статичното свойство

Статичното оформление е стандартното оформление на елементите, така че ако е свойство

не е посочено, предполага се

Относително изместване

Относителното позициониране измества елемент от нормалното му (статично) положение. В този случай мястото, разпределено за статично разположения елемент, остава празно. Елементът, докато се измества, припокрива други елементи на страницата.

Този начин на поставяне на елемент се задава от стойността на относителното свойство

За да зададете координатите на елемент при относително отместване, използвайте свойствата

. Тяхното предназначение е обсъдено по-долу.

увеличава горната координата с определената сума, т.е. премества елемента отгоре надолу. например,

: 1см; ще премести елемента надолу с 1 см.

увеличава дясната координата с определената сума, т.е. измества елемента отдясно наляво. например,

: 2.5ex; ще измести елемента надясно с 2½ напр.

увеличава долната координата с определената сума, т.е. премества елемента отдолу нагоре. например,

: петнадесет%; ще премести елемента надолу с 15% от височината на родителския елемент.

увеличава лявата координата с определената сума, т.е. премества елемента отляво надясно. например,

: 3px; ще измести елемента надясно с 3 пиксела.

Ако е посочена само вертикалната координата, хоризонталната остава непроменена. И обратно. Ако е посочена само хоризонталната координата, вертикалната координата също не се променя.

Струва си да се отбележи, че свойствата

не може да се използва заедно. Което е логично. В крайна сметка не можете едновременно да измествате елемент наляво и надясно или нагоре и надолу.

Нека да видим как изглежда всичко в действителност.

Опитайте да преоразмерите прозореца на браузъра и да наблюдавате как се променят координатите на елемента. Ще забележите, че елементът винаги е изместен от началната си позиция.

Абсолютно местоположение

При абсолютно позициониране изобщо не се отделя място за елемента и координатите се задават спрямо родителския елемент, ако той също е разположен абсолютно или спрямо тялото. С други думи, координатите се задават спрямо първия от родителските елементи, разположени абсолютно, или спрямо тялото, ако никой от родителските елементи не е абсолютно разположен.

За да зададем координатите на даден елемент при абсолютно разположение, използваме вече познатите свойства

. Тяхното предназначение е обсъдено по-долу.

задава разстоянието от горната част на позиционирания елемент до горната част на родителя. например,

: 1см; ще позиционира елемента на 1 см от горната част на родителския елемент.

задава разстоянието от десния ръб на позиционирания елемент до десния ръб на родителя. например,

: 2.5ex; ще позиционира елемента 2½ ex от десния край на родителския елемент.

задава разстоянието от дъното на позиционирания елемент до дъното на родителя. например,

: петнадесет%; ще позиционира елемента 15% от височината на родителския елемент от дъното на родителския елемент.

задава разстоянието от левия ръб на позиционирания елемент до левия ръб на родителя. например,

: 3px; ще позиционира елемента на 3 пиксела от лявата граница на родителския елемент.

Ако е посочена само вертикалната координата, хоризонталната остава непроменена. И обратно. Ако е посочена само хоризонталната координата, вертикалната координата също не се променя.

Струва си да се отбележи, че свойствата

не може да се използва заедно. Което е логично. В крайна сметка не можете едновременно да поставите елемент отляво и отдясно или отгоре и отдолу.

Нека поставим два елемента от двете страни на прозореца.

Имайте предвид, че няма място, отделено за думите вляво и вдясно. Думите, които ги заобикалят, звучат така, сякаш изобщо няма абсолютно разположени елементи.

Тъй като div, който съдържа примера, е статичен, абсолютно позиционираните елементи са позиционирани спрямо границите на тялото и извън техния родител.

Тъй като свойства

не бяха зададени, елементите просто се преместиха в страни. В този случай разстоянието от границите на елементите до границата на прозореца (елемент на тялото) е равно на половината от височината на малката буква x, както е посочено в правилата за стил.

Слоеста подредба, собственост

Както вече знаете от курсовете Ado­бъде Снимка­магазин и Corel­РИСУНКА, на компютър всички графики са представени на слоеве. И уеб дизайнът не е изключение.

Ако поставите няколко елемента един до друг на уеб страница, те могат да се припокриват и е важно да се предвиди реда на тяхното припокриване.

Елементите обикновено са подредени според тяхната дефиниция в изходния код. Елементът, дефиниран първи, ще бъде разположен най-далеч от нас, а елементът, дефиниран последен, ще бъде разположен най-близо до нас.

Този стандартен ред може лесно да бъде променен. За да направите това, просто трябва да дефинирате свойството

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

Елементи с големи

припокриват елементи с по-малко

Стъпка 10 е удобна за добавяне на нови елементи между съществуващите. Например трябва да вмъкнем елемент между елементи с

20 и 30. Ясно е, че новият елемент

ще бъде 25. И ако номерирахме слоеве 1, 2, 3, тогава би било невъзможно да вмъкнем друг слой между слоеве 2 и 3, без да преномерираме.

  • Елементите могат да бъдат позиционирани статично, относително и абсолютно.
  • Редът на подреждане на елементи се определя от свойството