Главная | Обратная связь | Поможем написать вашу работу!

Статическое позиционирование

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

Визуальные эффекты

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

Свойство visibility

Свойство visibilityуправляет отображением элемента. Если его значение равно visible (значение по умолчанию), то элемент отображается, если оно установлено равным hidden, то элемент не отображается. Когда для скрытия элемента используется его свойство visibility, то элемент не изымается из потока отображения. Это означает, что соответствующий ему блок занимает надлежащее положение на странице, но содержимое этого блока (элемент) не отображается.

Свойство display

Подобное поведение отличается от поведения объекта со свойством displayравным none. В последнем случае элемент не только не отображается, но и изымается из потока отображения, и на странице нет пустого блока, соответствующего этому элементу.

а) б)

Свойство clip

Свойство clipпозволяет обрезать видимое изображение абсолютно позиционированного элемента. Каждый такой элемент отображается в прямоугольном блоке определенной ширины и высоты, которые определяются либо шириной и высотой самого элемента, либо его свойствами width и height. Та часть элемента, которая отображается в блоке, является его видимым изображением. Блок отображения не обязательно должен соответствовать размерам самого элемента: он может вмещать весь элемент, а может вмещать только его часть. Например, блок отображения элемента <IMG> может быть меньше размеров графического изображения, представляемого этим элементом. Свойство clip воздействует только на блок отображения элемента. Его значением может быть auto (никакого отсечения не производится) или границы прямоугольника видимого изображения элемента, которые задаются с помощью следующего параметра rect(<top> <right> <bottom> <left>). Величины <top>, <right>, <bottom> и <left> определяют, соответственно, верхнюю, правую, нижнюю и левую границы видимого изображения элемента относительно блока отображения. На рисунке 2.10 а) показано графическое изображение с размерами 89х74 пикселя, а на рис. 2.10 б) то же изображение со свойством clip равным rect(10 70 60 10).

а) б)

Свойство overflow

Свойство overflowопределяет поведение элемента, когда размеры его содержимого не соответствуют размерам блока отображения, установленного свойствами top, left, width и height. Существует четыре значения этого свойства, определяющие поведение элемента:

· visible – заставляет элемент сжаться или увеличиться, чтобы полностью отобразиться в заданном блоке (для графического содержимого элемента) или увеличивает размеры блока отображения (для текстового содержимого)

· hidden – обрезает элемент в соответствии с размерами блока

· auto – добавляет полосы прокрутки к блоку отображения в случае, если размеры содержимого элемента превосходят размеры блока отображения

· scroll – добавляет полосы прокрутки к блоку отображения в любом случае

Свойство z-index

Обычно элемент, появляющийся позже другого в исходном тексте документа HTML, перекрывает ранее отображенные элементы. Свойство z-indexзадает "слой", в котором располагается элемент при отображении. Если "слой" расположен "ближе" к пользователю (значение свойства z-index больше), то элемент перекрывает любой другой элемент с меньшим значением "слоя", даже если последний и отображается позже. Следующие фрагменты документа HTML иллюстрирует использование свойства z-index, а на рис. 2.12 показаны результаты их отображения в окне браузера:

<!—Фрагмент 1-->

<IMG STYLE="position:absolute; top:80px; left:0px; z-index:auto"

SRC=Ж.gif>

<DIV STYLE="position:absolute; top:115px; left:10px; width:150px;

color:white; background-color:blue; z-index:auto">

Две буквы "Ж"</DIV>

<IMG STYLE="position:absolute; top:120px; left:50px; z-index:auto"

SRC=Ж.gif>

<!—Фрагмент 2-->

<IMG STYLE="position:absolute; top:260px; left:0px; z-index:3"

SRC=Ж.gif>

<DIV STYLE="position:absolute; top:295px; left:10px; width:150px;

color:white; background-color:blue; z-index:1">

Две буквы "Ж"</DIV>

<IMG STYLE="position:absolute; top:300px; left:50px; z-index:auto"

SRC=Ж.gif>

Если значение свойства z-index элемента отрицательно, то он размещается за текстом страницы.

⇐ Предыдущая 1 2 3 4 5 67