Иллюстрированный самоучитель по WEB-графике


Позиционирование элементов - часть 2


<HTML>

<НЕАD><TITLE>Позиционирование</TITLE> </НЕАD> <BODY BGCOLOR="AQUA">

<DIV STYLE="position:absolute;

top:0;left:70;width:50,-height:100;z-index:2">

<IMG SRC="logotip.gif">

</DIV>

<DIV STYLE="position:absolute; top:15;left:15;width:400,-height:100;

z-index: 1">

<H1 STYLE="color : red">nepBbiu позиционированный текст</Н1>

<DIV STYLE="position:absolute; top:60;left:300/width:50 ;

height: 100">

<H1 STYLE="color:Ыие">Второй позиционированный текст</Н1>

</DIV>

</BODY>

</HTML>

Рис. 666. Использование свойства i-index позволяет изменить естественный порядок следования элементов в тексте HTML-документа

При позиционировании элементов может оказаться, что размеры элемента превосходят размеры фрагмента (отводимой области, заданной в нашем примере тэгом <DIV>). Например, текст или картинка не помещаются полностью в прямоугольник, выделенный для них. На этот случай имеется свойство overwlow (переполнение). Свойство overflow может иметь три значения:

  • nоnе (ничего) — если элемент и выйдет за пределы фрагмента (отведенного для него места), он все равно будет показан;
  • clip — выступающие за границы фрагмента части элемента будут обрезаны;
  • scroll — будет использована прокрутка.

В следующем примере используется свойство overflow для создания механизма прокрутки первого текста.

<HTML>

<НЕАD><ТIТLЕ>Позиционирование</ТIТLЕ></НЕАD>

<BODY BGCOLOR="AQUA">

<DIV STYLE="position:absolute; top:0;left:70;width:50;height:100">

<IMG SRC="logotip.gif">

<DIV STYLE="position:absolute; top:10;left:15;width:220;height:120;

overflow:scroll">

<H1 STYLE="color: red">riepBbiM позиционированный текст </Н1>

<DIV STYLE="position:absolute;

lop:60;left:300;width:50;height:100">



Начало  Назад  Вперед



Книжный магазин