Сведения о размещении элементов
Windows Internet Explorer поддерживает размещение элементов HTML по координатам x и y, а также перекрытие элементов в плоскости по оси z, что позволяет управлять удаленностью элементов веб-документа от зрителя. Эти функции позволяют авторам точно размещать элементы, изображения, элементы управления и текст на веб-странице. Скрипты, изменяющие координаты и другие динамические стили, позволяют перемещать элементы по странице и создавать анимации. Совместное использование динамических стилей, размещения, прозрачных элементов управления Microsoft ActiveX и прозрачных изображений предоставляет разработчикам богатый набор параметров анимации.
Что такое размещение? Размещение с помощью каскадных таблиц стилей CSSопределяет размещение документов на странице и представляет собой расширение CSS в соответствии с рабочим документом W3C Description: интернет-ссылка по размещению в HTML средствами CSS. Элементы по умолчанию размещаются друг за другом в порядке, указанном в коде HTML. При этом каждый элемент имеет размер и положение, которые зависят от типа элемента, его содержимого и контекста отображения на странице. Подобная модель размещения схемы HTML по умолчанию не обеспечивает должного контроля над размещением элементов на странице. Применение небольшого набора атрибутов CSS к элементам на странице позволяет определять точное положение элементов путем задания точных координат. Также можно указать положение относительно других объектов на странице. Как и другие атрибуты HTML или CSS, атрибуты положения элемента могут использоваться в скриптах. Таким образом, расположение элементов на странице может динамически изменяться. Это позволяет повторно вычислить положение этих элементов и разместить их в другом месте после загрузки документа без повторного получения страницы с сервера. Для определения расположения элемента можно использовать различные способы. Определенные параметры позволяют разработчику сайта полностью контролировать степень отображения элемента на странице. Существует три способа расположения элемента по осям x и y. Тип расположения зависит от макета содержимого и назначения документа. При абсолютном размещении положение элемента определяется относительно вышестоящей системы координат вне зависимости от другого содержимого. При фиксированном размещении положение элементов определяется относительно окна браузера и не зависит от другого содержимого.. При относительном размещении положение элемента определяется относительно других элементов на странице. Относительное размещение зависит от размещения элементов документа по умолчанию. В этом случае при изменении размера окна браузера содержимое размещается повторно. Microsoft Internet Explorer 6 и более поздние версии: рекомендуется установить атрибут !DOCTYPE в режим strict, чтобы обеспечить соответствие стандартов отображения со спецификацией W3C Cascading Style Sheets, Level 2.1 (CSS2.1) <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Strict//EN"> Примечание Internet Explorer 7 и более поздние версии: В режиме strict доступно фиксированное размещение. Абсолютное размещение Элемент с абсолютным размещением всегда зависит от вышестоящего размещенного элемента. Если вышестоящий элемент отсутствует, то используется блок вложения. Значения атрибутов left и top отсчитываются от верхнего левого угла вышестоящего размещенного элемента в иерархии. Например, чтобы разместить изображение в верхнем левом углу документа, установите эти атрибуты равными 0. <img src="sample.gif" style="position:absolute; left:0px; top:0px"> Этот код позволяет разместить изображение в границах элемента HTML. Обратите внимание на то, что элемент HTML по умолчанию имеет значение рамки 1. Чтобы оставить только одну рамку, установите значение рамки элемента body равным 0. При этом изображение будет размещено в координатах клиентской области 0,0. Влияние вышестоящего элемента на абсолютное размещение демонстрируется в следующем примере. <div style="position:relative;left:50px;top:30px;height:100px;width:100px"> Текст в тегах DIVбудет скрыт изображением, так как изображение будет размещено над этим текстом. <img src="sample.gif" style="position:absolute; left:0px; top:0px"> <div> Здесь элемент img размещается в верхнем левом углу элемента div, который также имеет свое положение на странице. При выборе абсолютного размещения элемент исключается из обычной схемы размещения и располагается безотносительно окружающих элементов. Если другие элементы уже занимают указанное положение, то они не влияют на размещенный элемент, а он также не влияет на них. В результате все элементы размещаются в одном положении, что вызывает перекрытие. Разработчик может управлять этим перекрытием с помощью атрибута z-index, который позволяет указать порядок размещения элементов в одном расположении. Содержимое размещенного элемента отображается в пределах указанных размеров в соответствии со схемой размещения HTML по умолчанию. Например, текст переносится в соответствии с шириной элемента, а встроенные элементы в составе размещенных элементов размещаются друг рядом с другом в исходном порядке и в соответствии с ограничениями размера и формы контейнера (размещенного элемента). Фиксированное размещение Начиная с версии Internet Explorer 7 разработчики могут использовать фиксированное размещение (разновидность абсолютного размещения). Как и контейнеры абсолютного размещения, элементы с фиксированным положением не зависят от других элементов. Если применено фиксированное положение, то они не будут связаны с другими вышестоящими и нижестоящими элементами. Это различие отражается в размещении элементов. В отличие от размещения элемента страницы body (как в случае с абсолютным размещением) содержимое элемента с фиксированным положением располагается в пределах указанных размеров окна браузера (окна просмотра). В следующем примере приведена стандартная схема, представляющая фиксированные атрибуты: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Strict//EN"> <html><head><title>Пример фиксированного размещения</title><style type="text/css"> body{height=640px; width=480px;} #logoBar {position:fixed; width:99.15%; height:15%; top:0; right:0; bottom:auto; left:0; border:solid;} #leftSide {position:fixed; width:10em; height:auto; top:15%; right:auto; bottom:50px; left:0; border:solid;} #main {position:fixed; width:auto; height:auto; top:15%; right:0; bottom:50px; left:10em; border:solid;} #footer {position:fixed; width:99.15%; height:50px; top:auto; right:0; bottom:0; left:0; border:solid;} </style></head><body> <div id="logoBar">...logobar...</div> <div id="leftSide">...leftside...</div> <div id="main">...main...</div> <div id="footer">...footer...</div> </body></html> Пример кода: http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/overview/pos_08.htm В этом примере фиксированные контейнеры размещаются вне содержимого страницы. Их положение остается связанным с окном просмотра даже в том случае, если изменяется размер окна браузера. После определения их расположение не изменяется, что позволяет группировать в них нижестоящие элементы. В связи с этим при создании страницы следует внимательно обдумать особенности размещения элементов. Относительное размещение Установка атрибута CSS position в значение relative позволяет включить элемент в стандартную схему размещения документа HTML и поставить его положение в зависимость от положения предыдущего содержимого. Например, при размещении текста в абзаце со значением relative положение текста будет зависеть от текста в предшествующем абзаце. <p>В слове name<span style="position: relative; top:-3px">xyz</span> отображается надстрочный текст xyz.</p> Если пользователь изменит размеры окна, то текст xyzвсе равно будет отображаться на три пикселя выше направляющей текста. Чтобы изменить горизонтальный промежуток между словами name и xyz, можно таким же образом установить атрибут left. Если содержимое элемента span было бы размещено абсолютным образом, то положение слова xyzзависело бы от элемента HTML (или следующего размещенного элемента в иерархии), а слово xyzбыло бы практически незаметным и отображалось бы в верхнем углу области клиента, что, скорее всего, не подразумевалось разработчиком. Текст и элементы, зависящие от относительно размещенного элемента, занимают собственное пространство и не пересекаются с пространством размещенного элемента. Сравните это с абсолютным размещением элемента, при котором последующий текст и элементы занимают место, выделенное размещенному элементу перед тем, как он был выведен из стандартной схемы размещения. Элементы с относительным положением могут пересекаться с другими объектами и элементами на странице. Как и при абсолютном размещении, можно использовать атрибут z-index для настройки порядка размещения элемента относительно других элементов, которые могут занимать эту область. Размещенный элемент по умолчанию имеет большую координату z по сравнению с вышестоящим элементом, поэтому подчиненный элемент всегда будет размещаться поверх вышестоящего. Рекомендации по размещению Тип расположения зависит от макета содержимого и назначения документа. Относительное размещение зависит от схемы размещения элементов документа по умолчанию. В этом случае при изменении размера окна браузера схема изменяется. Фиксированное размещение также связано с окном браузера, поэтому схема изменяется при изменении размера окна. В то же время при абсолютном размещении изображения и текст располагаются с указанными координатами вне зависимости от действий пользователя. Ниже приведен пример вложения элемента с абсолютным размещением в элемент с относительным размещением. Цель состоит в размещении текста по центру прямоугольника. Раньше для этого приходилось использовать таблицу и атрибуты центровки содержимого в ячейке. Недостатком этого была привязка к статической таблице. Атрибуты размещения позволяют расширить эту схему, а затем добавить скрипты, которые, например, могут использоваться для анимации появления этих элементов с какой-либо стороны документа при загрузке страницы пользователем. <html> <head><title>Размещение элемента DIV по центру</title> <script language="JScript"> function doPosition() { two.style.top = document.all.one.offsetHeight/2 - two.offsetHeight/2; two.style.left = document.all.one.offsetWidth/2 - two.offsetWidth/2; } </script> </head> <body onload="doPosition()"> <p>Текст в начале.</P> <div id=one style="position:relative; top:10px; height:200px; width:200px; background-color:green">Текст во внешнем элементе DIV <div id=two style="position:absolute; left:50px; width:100px; color:red; border:red 2px solid">текст во внутреннем элементе DIV - красный цвет </div> <div> </body> </html> Пример кода: http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/overview/pos_01.htm В приведенном примере внешний элемент div размещается вместе с предшествующим содержимым, то есть с отступом в 10 пикселов от первого абзаца. Внутренний элемент div имеет исходное абсолютное расположение, но оно изменяется функцией скрипта doPosition при загрузке документа. Свойства offsetWidth и offsetHeight используются для вычисления нового абсолютного положения элемента. Для размещения изображений по центру в этом примере также можно использовать свойство posLeft или pixelLeft. Эти свойства также предоставляют доступ к свойству left и позволяют задавать положение с помощью числа с плавающей точкой или целого числа. Доступ к свойствам top, width и height возможен через аналогичные свойства. Совмещение способов динамического размещения Предыдущий пример можно расширить для управления несколькими элементами страницы. Для создания анимации необходимо изменить функцию скрипта, вызываемую событием onload, чтобы внутренний фрагмент текста «вылетал» из-за пределов экрана. Эта функция может управляться таймером, который перемещает внутренний элемент div с исходных координат top и left в положение вне видимой части страницы, а затем через определенное время перемещает его в центр внешнего элемента div. В следующем примере элемент div становится видимым, а содержимое перемещается по экрану. Установка интервала с помощью метода setInterval в объекте window позволяет передвигать один или несколько элементов по истечении установленного времени. <html> <head><title>Перемещение элемента DIV</title> <script language="JScript"> var action; function StartGlide() { Banner.style.pixelLeft = document.body.offsetWidth; Banner.style.visibility = "visible"; action = window.setInterval("Glide()",50); } function Glide() { document.all.Banner.style.pixelLeft -= 10; if (Banner.style.pixelLeft<=0) { Banner.style.pixelLeft=0; window.clearInterval(action); } } </script> </head> <body onload="StartGlide()"> <p>Динамическое размещение позволяет перемещать элементы и их содержимое в любое место документа даже после его загрузки! <DIV ID="Banner" style="visibility:hidden; position:absolute; top:0px; left:0px"> Познакомьтесь с новыми возможностями динамического HTML!<div> </body> </html> Пример кода: http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/overview/pos_02.htm Примечание Динамическое преобразование неразмещенного элемента в размещенный поддерживается только в Internet Explorer 5 и более поздних версиях. Сведения об интеграции размещения с другими приемами динамического HTML (DHTML) см. в разделе Введение в работу с фильтрами и переходами, который содержит информацию о добавлении визуальных эффектов фильтра. Управление отображением содержимого
Помимо изменения расположения элемента на странице существуют другие способы скрытия содержимого элементов. Атрибуты display и visibility определяют необходимость отображения элемента на экране, а атрибуты clip и overflow определяют объем отображаемого содержимого. Авторы также могут определять видимость перекрывающихся элементов с помощью порядка z-index. Обрезка областей и переполнение Для размещенного элемента можно определить область обрезки с помощью атрибута clip. Область обрезки определяет прямоугольник, в пределах которого элемент является видимым. Область элемента, находящаяся вне области обрезки, не отображается. Область обрезки не изменяет код HTML, а определяет отображение элемента. Например, в следующем документе атрибут clip используется для определения области обрезки для элемента img с абсолютным размещением. Квадратная область размером 50 на 50 пикселов позволяет отобразить только часть изображения. <html> <head> <title>Обрезка изображения с помощью атрибута clip</title> <meta http-equiv="X-UA-Compatible" content="IE=8" /> <style type="text/css"> img { clip: rect(0px,50px,50px,0px); position: absolute; top: 50px; } </style> </head> <body> <h2>Обрезка изображения с помощью атрибута clip</h2> <img alt="ielogo" src="ie8_logo.jpg"> </body> </html> Пример кода: http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/overview/pos_03.htm При определении области обрезки следует соблюдать осторожность: порядок параметров top, right, bottom и leftкрайне важен. Например, значение clip:rect (0, 0, 50, 50) приводит к тому, что область не отображается, так как параметры top и right равны нулю. Для корректного определения области обрезки размером 50 на 50 пикселов в верхнем левом углу размещенного объекта следует установить clip:rect равным (0, 50, 50, 0). Область обрезки можно изменять динамически с помощью свойства clip, как в следующем примере. document.all.MyDiv.style.clip = "rect(0, 50, 75, 0)"; Переполнение происходит в том случае, если в размещенном элементе больше содержимого, чем может поместиться в определенной для него области. Дополнительное содержимое по умолчанию отображается, но размещается ниже указанной области, и поэтому может перекрывать другие элементы документа. Чтобы предотвратить это, используйте атрибут overflow для скрытия переполнения или для включения полос прокрутки и просмотра всего содержимого. Например, в следующем документе атрибут overflow позволяет добавить полосы прокрутки. Изначально отображается только часть текста, которая входит в область 100 на 100 пикселов, но пользователь может просмотреть текст полностью с помощью полос прокрутки. <html> <head><title>Прокрутка переполнения</title> </head> <body> <div style="position:absolute;top:50px;left:50px;height:100px;width:100px; overflow:scroll"> содержимое содержимое содержимое содержимое содержимое содержимое содержимое содержимое содержимое содержимое содержимое содержимое содержимое содержимое содержимое содержимое содержимое содержимое содержимое содержимое содержимое содержимое содержимое </div> </body> </html> Пример кода: http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/overview/pos_04.htm Чтобы скрыть переполнение, установите атрибут overflow равным hidden. Переполнение также можно разместить вне границ области путем установки значения visible. Переполнение можно изменять динамически с помощью свойства overflow, как показано в следующем примере. if (document.all.MyDiv.style.overflow != "scroll") document.all.MyDiv.style.overflow = "scroll"; Упорядочивание по оси Z Параметр z-index определяет порядок расположения элементов в том случае, если они расположены в одном и том же месте. Установка параметра z-indexпозволяет правильно разместить элементы с абсолютными или относительными координатами, которые пересекаются с другими элементами документа. Для этого используется атрибут z-index. При положительном значении элемент располагается перед другими элементами, а при отрицательном — за ними. В следующем примере текст размещается поверх изображения с помощью атрибута z-index. <html> <head><title>Размещение изображения</title> </head> <body> <p style="position:absolute;top:0px;left:0px">Текст на изображении</p> <img src="sample.jpg" style="position:absolute;top:0px;left:0px;z-index:-1"/> </body> </html> Пример кода: http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/overview/pos_05.htm Элемент с наибольшим значением z-index всегда размещается поверх всех элементов, а элемент с наименьшим значением z-index — позади всех. Если два элемента имеют одинаковое значение z-index, то их расположение определяется исходным порядком (последний элемент располагается выше). Примечание Действия указывающих устройств (например, мыши) не проходят сквозь перекрывающие элементы даже в том случае, если они невидимы. Это также справедливо для размещенных элементов с отрицательным значением z-index, если вышестоящий элемент не является контейнером прокрутки (т.е. его свойство overflow имеет значение autoили scroll) или вышестоящий элемент не размещен вручную (т.е. его свойство position имеет значение absolute, relative или fixed). Значение z-index можно изменять динамически с помощью свойства z-index, как показано в следующем примере. MyImg.style.zIndex = 2; Большая часть элементов не имеет окон и может участвовать в перекрытии по оси z. При этом некоторые объекты имеют окна. Элементы управления ActiveX, которые не настроены особым образом, не будут пересекаться с другими объектами. Элементы iframe также представляют собой объекты с окнами, которые не участвуют в перекрытии по оси z. Еще одним исключением является элемент select, который также является элементом с окнами в Internet Explorer 6 и более ранних версиях.В версии Internet Explorer 7 элемент select не имеет окон и поддерживает атрибут z-index и свойство zIndex. Примечание Несмотря на то, что они связаны с различными частями отображаемой страницы, фиксированные элементы размещения также подчиняются относительному порядку размещения объектов с абсолютным положением. Отображение элементов Параметр visibility размещенного элемента определяет его видимость для пользователя. Это свойство позволяет временно скрыть объект (например, на время расчета его нового положения или выполнения простых эффектов перехода). Для настройки отображения используется атрибут visibility. В следующем примере этот атрибут отключает отображение элемента div. <p>Предшествующий абзац в элементе DIV</p> <div id=MyDiv style="position:absolute; top:50px; left:50px; height:100px; width:100px; visibility:hidden"></div> <p>Последующий абзац в элементе DIV</p> Для настройки отображения элемента из скрипта используется свойство visibility. Например, предположим, что загружен элемент div из предыдущего примера. Изначально он не отображается, но его можно сделать видимым с помощью следующего кода: MyDiv.style.visibility = "visible"; Невидимый элемент влияет на размещение объектов в документе, т.е. занимаемое им место остается в документе пустым. Это отличает описываемое свойство от атрибута display, который не резервирует пространство. В следующем примере демонстрируется разница между атрибутами visibility и display. Пример кода: http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/overview/pos_06.htm |