по управлению внешним видом Web-страницы.
Для позиционирования используются CSS-стили для
блоков информации и перемещение этих блоков относительно документа или окна браузера (для создания позиционируемого блока обычно используется дескриптор
).
В CSS выделяются понятия:
Нормальный поток – нестилизованное позиционирование содержимого страницы в браузере
Блок-контейнер – родительский блок для элемента, который необходимо позиционировать
Окно просмотра браузера – окно браузера, в котором отображается содержимое документа
Слайд 4Типы позиционирования
Абсолютное absolute – относительно корневого элемента или относительно
блока-контейнера :
{position: absolute; left: 10px; top: 50px; border: 2px solid
red;}
Относительное relative – относительно нормального потока, когда нет другого позиционирования.
Статическое static – позиционирование в нормальном потоке (аналогично относительному).
Фиксированное fixed – позволяет закрепить блок в любом месте страницы, фиксируется относительно окна просмотра при прокрутке:
{position: fixed; left: 0px; top: 0px; background: red;}
Слайд 5Плавающее позиционирование
Плавающее float используется для позиционирования элементов относительно других блоков
справа – right или слева – left с обтеканием текстом
соответственно слева или справа:
{float: right; border: 1px double green; padding: 20px}
Очищенное плавающее clear используется для отдельного размещения плавающего элемента без обтекания текстом (справа – right, слева – left, с обоих сторон – both):
{float: right; clear: left;}
Z-индекс позволяет накладывать элементы друг на друга, задает 3-ю ось в пространстве Web-страницы – чем больше значение z-индекса, тем выше размещен блок на странице:
#blok1 {position: fixed; left: 0px; top: 0px; z-index: 2;}
#blok2 {position: fixed; left: 20px; top: 50px; z-index: 1;}
