- •2.2.3. Вынесение таблицы стилей в отдельный файл
- •2.2.4. Приоритет применения стилей
- •2.6.2. Внутренние отступы
- •2.7. Рамки
- •2.7.1. Стиль линии рамки
- •2.14. Позиционирование элемента. Размещаем элемент в произвольном месте окна Web-браузера
- •2.15. Управление отображением элемента. Скрываем и отображаем абзацы
2.14. Позиционирование элемента. Размещаем элемент в произвольном месте окна Web-браузера
Листинг 2.9. Позиционирование элементов
<HTML>
<HEAD>
<TITLE>Позиционирование элементов</TITLE>
<STYLE>
P.abz3 { position: absolute; top: -75px; left: -75px; width: 250px; height: 250px; overflow: hidden; z-index: 2; background-color: green }
P.abz5 { position: absolute; top: 80px; left: 50%; width: 150px;
height: 150px; overflow: auto; z-index: 3; background-color: silver }
P.abz7 { position: relative; top: 0px; left: 30px }
</STYLE>
</HEAD>
<BODY>
<P>Статически позиционированный абзац1</P><BR><BR><BR>
<P style="position: absolute; top: 0px; left: 120px; width: 150px; height: 150px; overflow: scroll; z-index: 1; background-color: silver">Абсолютно позиционированный абзац2</P>
<P class="abz3">Абсолютно позиционированный абзац3 наполовину выходящий за границу окна Web-браузера и перекрывающий все остальные элементы страницы</P>
<P>Статически позиционированный абзац4</P><BR><BR><BR>
<P class="abz5">Абсолютно позиционированный абзац5, местоположение которого задано в процентах.</P>
<P>Статически позиционированный абзац6</P>
<P class="abz7">Относительно <BR>позиционированный <BR>абзац7.</P>
<P>Статически позиционированный абзац8</P>
</BODY>
</HTML>
2.15. Управление отображением элемента. Скрываем и отображаем абзацы
Листинг 2.10. Скрытие и отображение элементов
<HTML>
<HEAD>
<TITLE>Скрытие и отображение элементов</TITLE>
<SCRIPT language="JavaScript">
<!--
function ChangeAbz1() {
if (abz1.style.display=='none') {
abz1.style.display='block';
}
else {
abz1.style.display='none';
}
}
function ChangeAbz2() {
if (abz2.style.visibility=='hidden') {
abz2.style.visibility='visible';
}
else {
abz2.style.visibility='hidden';
}
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<A href="javascript:ChangeAbz1()">Щелкните на ссылке, чтобы отобразить или скрыть абзац</A>
<P id="abz1" style="display: none; background-color: silver">Скрытый абзац</P>
<P>Демонстрация применения атрибута display.</P><BR>
<A href="javascript:ChangeAbz2()">Щелкните на ссылке, чтобы отобразить или скрыть абзац</A>
<P id="abz2" style="visibility: hidden; background-color: silver">Скрытый абзац</P>
<P>Демонстрация применения атрибута visibility.</P>
</BODY>
</HTML>