Отправляет email-рассылки с помощью сервиса Sendsay

Web-программирование - это просто!

Подписаться Бесплатная «Серебряная» новостная рассылка . Подписчиков 680 RSS
←   Декабрь 2009   →
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31


За последние 60 дней ни разу не выходила


Сайт рассылки: http://www.easyprog.ru
Открыта: 27-06-2009
Адрес автора: comp.soft.prog.easyweb-owner@subscribe.ru

Автор
Александр

Статистика

680 подписчиков
0 за неделю
←   Все выпуски   →

Web-программирование - это просто!


Новое на сайте Программирование - это просто! (www.easyprog.ru):

В бесплатном разделе

В платном разделе

Добрый день, уважаемые подписчики!

Тема сегодняшнего выпуска: «CSS: способы позиционирования блоков».

 

Кратко я уже описывал позиционирование блоков в выпуск 5. Теперь остановимся на этом более подробно. Сначала вспомним, как выглядел код позиционирования:

 

 <STYLE TYPE="text/css">

 <!--

      #pict {

                  position:absolute;

                  left:300px;

                  top:0px;

      }

 -->

 </STYLE>

 

Для задания способа позиционирования мы использовали правило position, а для задания координат от текущей позиции правила left и top.

После правила position можно задавать способ позиционирования:

  • Static - позиционирование идет в соответствии с правилами нормального потока: второй блок располагается под первым, третий под вторым и так далее.

  • Relative - относительное позиционирование: блок смещается относительно места, предусмотренного для него в рамках нормального позиционирования. Смещения задается правилам left, top, right, bottom.

  • Absolute - абсолютное позиционирование: блок смещает на заданное правилами  left, top, right, bottom.  смещение относительно родительского элемента. Если родительского элемента нет - то относительно верхнего левого угла экрана.

  • Fixed - тоже, что и absolute, но не смещается при прокрутке экрана. Стоит, однако, заметить, что не все браузеры понимают это правило. в частности, в IE, подобное задание способа позиционирования работать не будет, а вот в Opera или FireFox данное правило обрабатывается корректно.

А теперь рассмотрим пример:

<HTML>
<HEAD>
<TITLE>Урок 21. CSS: Способы позиционирования</TITLE>
</HEAD>
<STYLE TYPE="text/css">
<!--
#div1 {
position:relative;
left:120;
top:30;
}
div {
border:solid thin black;
-->
</STYLE>
<BODY>

<div>Первый блок</div>
<div id="div1">Второй блок</div>
<div>Третий блок</div>
</BODY>
</HTML>

 

А вот так будет выглядеть данный файл в браузере:

 

А теперь, давайте между первым и вторым блоком добавим еще один блок:

 

<HTML>
<HEAD>
<TITLE>Урок 21. CSS: Способы позиционирования</TITLE>
</HEAD>
<STYLE TYPE="text/css">
<!--
#div1 {
position:relative;
left:120;
top:30;
}
div {
border:solid thin black;
-->
</STYLE>
<BODY>

<div>Первый блок</div>
<div>Новый блок</div>
<div id="div1">Второй блок</div>
<div>Третий блок</div>
</BODY>
</HTML>

 

и посмотрим что из этого выйдет:

 

 

А теперь попробуем эти же два примера проделать с абсолютным позиционированием. И так, пример первый:

<HTML>
<HEAD>
<TITLE>Урок 21. CSS: Способы позиционирования</TITLE>
</HEAD>
<STYLE TYPE="text/css">
<!--
#div1 {
position:absolute;
left:120;
top:30;
}
div {
border:solid thin black;
-->
</STYLE>
<BODY>

<div>Первый блок</div>
<div id="div1">Второй блок</div>
<div>Третий блок</div>
</BODY>
</HTML>

 

А вот как это будет выглядеть:

 

 

А если добавить еще один блок:

<HTML>
<HEAD>
<TITLE>Урок 21. CSS: Способы позиционирования</TITLE>
</HEAD>
<STYLE TYPE="text/css">
<!--
#div1 {
position:absolute;
left:120;
top:30;
}
div {
border:solid thin black;
-->
</STYLE>
<BODY>

<div>Первый блок</div>
<div>Новый блок<div>
<div id="div1">Второй блок</div>
<div>Третий блок</div>
</BODY>
</HTML>

 

 

Заметили разницу?

С уважением, Шуравин Александр, e-mail: megabax@rambler.ru, автор оставляет за собой право публиковать в рассылках ваши письма, если в письме прямо неоговорено нежелание его публиковать.

 
В избранное