Уроци по уеб дизайн
Елементите могат да бъдат позиционирани на уеб страница по три различни начина: статичен, относителен и абсолютен. Конкретният вариант на местоположението на елемента се задава от свойството
. Възможни стойности на свойствата
- статично позиционира елемента по обичайния начин - статично. Всички елементи, с които сме работили досега, са позиционирани статично. С други думи, ако елементът не е позициониран по някакъв специален начин, той е позициониран статично.
- относително отмества елемента спрямо първоначалното му положение. Разпределеното за елемента пространство се запазва и остава празно.
- абсолютни позиционира елемента в точката с абсолютни координати спрямо родителския елемент.
Нека разгледаме по-отблизо всички опции.
Статично разположение
При статично разположение елементът е там, където трябва да бъде по подразбиране на уеб страницата. За статично разположен елемент не е възможно да се задават координати.
Статичното местоположение се задава от стойността на статичното свойство
Статичното оформление е стандартното оформление на елементите, така че ако е свойство
не е посочено, предполага се
Относително изместване
Относителното позициониране измества елемент от нормалното му (статично) положение. В този случай мястото, разпределено за статично разположения елемент, остава празно. Елементът, докато се измества, припокрива други елементи на страницата.
Този начин на поставяне на елемент се задава от стойността на относителното свойство
За да зададете координатите на елемент при относително отместване, използвайте свойствата
. Тяхното предназначение е обсъдено по-долу.
увеличава горната координата с определената сума, т.е. премества елемента отгоре надолу. например,
: 1см; ще премести елемента надолу с 1 см.
увеличава дясната координата с определената сума, т.е. измества елемента отдясно наляво. например,
: 2.5ex; ще измести елемента надясно с 2½ напр.
увеличава долната координата с определената сума, т.е. премества елемента отдолу нагоре. например,
: петнадесет%; ще премести елемента надолу с 15% от височината на родителския елемент.
увеличава лявата координата с определената сума, т.е. премества елемента отляво надясно. например,
: 3px; ще измести елемента надясно с 3 пиксела.
Ако е посочена само вертикалната координата, хоризонталната остава непроменена. И обратно. Ако е посочена само хоризонталната координата, вертикалната координата също не се променя.
Струва си да се отбележи, че свойствата
не може да се използва заедно. Което е логично. В крайна сметка не можете едновременно да измествате елемент наляво и надясно или нагоре и надолу.
Нека да видим как изглежда всичко в действителност.
Опитайте да преоразмерите прозореца на браузъра и да наблюдавате как се променят координатите на елемента. Ще забележите, че елементът винаги е изместен от началната си позиция.
Абсолютно местоположение
При абсолютно позициониране изобщо не се отделя място за елемента и координатите се задават спрямо родителския елемент, ако той също е разположен абсолютно или спрямо тялото. С други думи, координатите се задават спрямо първия от родителските елементи, разположени абсолютно, или спрямо тялото, ако никой от родителските елементи не е абсолютно разположен.
За да зададем координатите на даден елемент при абсолютно разположение, използваме вече познатите свойства
. Тяхното предназначение е обсъдено по-долу.
задава разстоянието от горната част на позиционирания елемент до горната част на родителя. например,
: 1см; ще позиционира елемента на 1 см от горната част на родителския елемент.
задава разстоянието от десния ръб на позиционирания елемент до десния ръб на родителя. например,
: 2.5ex; ще позиционира елемента 2½ ex от десния край на родителския елемент.
задава разстоянието от дъното на позиционирания елемент до дъното на родителя. например,
: петнадесет%; ще позиционира елемента 15% от височината на родителския елемент от дъното на родителския елемент.
задава разстоянието от левия ръб на позиционирания елемент до левия ръб на родителя. например,
: 3px; ще позиционира елемента на 3 пиксела от лявата граница на родителския елемент.