Позиционирование элементов на Web-странице

Позиционирование, т.е. расположение элементов на Web-странице осуществляется с помощью свойства CSS position, которое имеет такие параметры:

static;

relative;

absolute;

Значение static, которое принимается по умолчанию, означает, что браузер будет располагать элементы на Web-странице в соответствии со своими правилами в том порядке, в каком они указаны в HTML-документе.

Значение relative означает, что браузер будет располагать элемент на Web-странице в месте, которое отличается от места, заданного по умолчанию (т.е. с помощью свойства static) на величину, указанную с помощью свойств left и top.

Значение absolute означает, что браузер будет располагать элемент на Web-странице в месте, непосредственно заданном с помощью свойств left и top. В этом случае свойство left задает расстояние в пикселях от левой границы экрана до элемента, а свойство top - расстояние в пикселях от верхней границы экрана до элемента.

С помощью CSS можно также сделать видимым на Web-странице не весь элемент, а только его часть. Это осуществляется с помощью свойства clip , которое имеет такие значения:

auto - задается по умолчанию и делает видимым весь элемент;

rect(верхняя граница, правая граница, нижняя граница, левая граница) - делает видимым часть изображения в виде прямоугольника, ограниченного указанными границами, заданными в пикселях.

При задании абсолютных координат для элементов Web-страницы станосится возможным наложение на экране одного элемента на другой, т.е. создания многослойного изображения. В этом случае верхним браузер поместит элемент, который в HTML-документе стоит позже другого.

Вместе с тем имеется возможность для каждого элемента задавать номер слоя явно. Это делается с помощью свойства CSS z-index , значением которого является число. Чем больше это число, тем к более высокому слою относится элемент. По умалчиванию всем элементам Web-страницы присваивается значение z-index:0 .

Использование каскадных листов стилей для позиционирования элемента, представления только его части и задания двух слоев на Web-странице показано в примере №1.