Иллюстрированный самоучитель по созданию сайтов



Наложение элементов веб-страницы - часть 2


Действительно, при абсолютном (да и относительном) позиционировании блоки могут накладываться друг на друга, и тогда возникает проблема “третьего измерения” — какой из них окажется “выше”? Для решения этой проблемы придумали стилевое свойство z-index. Чем больше его значение, тем “выше” располагается блок при наложении.

Чтобы наш “водяной знак” не загораживал все остальное, определим для класса logo отрицательное значение

z-index:

z-index: -5;

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitionai//EN"> <HTML>

<HEAD>

<TITLE>ФИРМА "ЛЕНТЯЙ"</ТIТLЕ>

<STYLE> BODY {

background-color: #D2FFFF;

color: #003737; background-image: url("Images\grad2.jpg"); background-position: right; background-repeat: repeat-y;

} A:link,A:active,A:visited { color: #006A6A;

} A:hover { font-weight: bold; text-decoration: none;

}.hdr { position: absolute; left: 50px; top: 10рх; text-align: center; font-family: OdessaScriptFWF, fantasy, font-size: 60px; font-weight: 900; width: 90%; height: 100px; letter-spacing: 0.05em; line-height: 100px; filter: shadow; border: 10рх outset #003163; color: #3163CE;

} .rght { position: absolute; font-size: large; left: 565px; top: 160px; width: 160px; height: 400px; overflow-x: visible; }

.Ink { border-width: thick; border-style: ridge; margin: 10рх; padding: 5px; border-color: #319CFF; background-image: uri("Images/backlnki.jpg") ; color: red; text-align:center;

} .Ink A { text-decoration: none; color: white; } .1ft { position: absolute; font-size: meduim; left: 10рх; top: 160px; width: 550px; height: 400px; overflow: auto; } .bigger { font-size: larger; font-family: sans-serif; } .logo { position: absolute; left: 150; top: 220; z-index: -5; }

</STYLE>

</HEAD>

<BODY>

<DIV CLASS="hdr">ФИРМА&nbsp;&1аquо;ЛЕНТЯЙ&raquо;</DIV>

<DIV CLASS="rght"> <DIV CLASS="lnk">УСЛУГИ</DIV>




Содержание  Назад  Вперед