НАЦИОНАЛЬНЫЙ ИССЛЕДОВАТЕЛЬСКИЙ УНИВЕРСИТЕТ

МОСКОВСКИЙ ЭНЕРГЕТИЧЕСКИЙ ИНСТИТУТ

Лабораторная работа по ВМСС № 7.

Использование слоев.

Выполнил

студент группы А-13-08

Апухтин М.А.

Преподаватель

Куриленко И.Е.

Москва, 2012

Оглавлени

Слои. 3

Абсолютное позиционирование 3

Относительное позиционирование 3

Выполнение работы 3

layer.htm 3

layer.css 4

Список использованных источников 4

Слои.

Любые позиционированные элементы на веб-странице могут накладываться друг на друга в определенном порядке, имитируя тем самым третье измерение, перпендикулярное экрану. Каждый элемент может находиться как ниже, так и выше других объектов веб-страницы, их размещением по z-оси и управляет z-index. Это свойство работает только для элементов, у которых значение position задано как absolute, fixed или relative.

Абсолютное позиционирование

Абсолютное позиционирование позволяет накладывать слои в любом порядке друг на друга. Но при этом требуется знать точные координаты каждого слоя относительно одного из углов окна браузера, что не всегда возможно. Поэтому данный подход имеет ограниченную область применения, например для создания верхнего меню, когда его положение не меняется и точно зафиксировано.

При использовании наложения требуется присвоить свойству position значение absolute. Само положение слоя регулируется свойствами left, top, right и bottom которые задают координаты соответственно от левого, верхнего, правого и нижнего края. Поскольку вывод содержимого слоя осуществляется в заданное место, то порядок описания слоев указывает и порядок их наложения друг на друга. Самый первый слой, приведенный в коде веб-страницы, будет располагаться на заднем плане, а самый последний — на переднем. Порядок также можно менять с помощью свойства z-index. Чем больше его значение, тем выше располагается текущий слой относительно других слоев.

Относительное позиционирование

Чтобы наложить один слой на другой и не привязываться жестко к координатной сетке, можно попробовать следующий подход. Для первого слоя, который будет располагаться на заднем плане, указываем абсолютное позиционирование, присваивая свойству position значение absolute. Второй слой, расположенный поверх первого, должен иметь относительное позиционирование, что достигается с помощью значения relative у свойства position. Положение верхнего слоя определяется от левого верхнего угла нижнего слоя заданием left и top.

Выполнение работы

layer.htm

Слои

Главная

width="88" />

layer.css

.picture1 {position: absolute;

left: 100px;

top: 150px;

width:380px;

height:530px;

z-index: 1;}

.picture2 {position:absolute;

left:500px;

top:150px;

width:380px;

height:530px;

z-index:2;}

.picture3 {position:absolute;

left:250px;

top:275px;

width:380px;

height:530px;

z-index:3;}

Список использованных источников

• http://ru.html.net/tutorials/css/lesson15.php

• http://htmlbook.ru/content/fiksirovannyy-dizayn-nalozhenie-sloev