Slyweb
На разработку сайта! Скидки 50%!
Поиск CSS свойств и HTML элементов:
поиск



Все CSS свойства и HTML элементы справочника

Для сравнения всех потоков будет использоваться следующий базовый пример HTML кода:

  1.<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
  2.<HTML>
  3. <HEAD>
  4. <TITLE>Базовый пример для изучения потоков в CSS</TITLE>
  5. </HEAD>
  6. <BODY>
  7. <P>Начало страницы
  8. <SPAN id="outer"> Начало элемента span
  9. <SPAN id="inner"> Содержимое элемента span.</SPAN>
10. Конец элемента с классом outer.</SPAN>
11. Конец страницы.
12. </P>
13. </BODY>
14.</HTML>
15.

В первом случае элементы будут находиться в нормальном потоке.

  1.<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
  2.<HTML>
  3. <HEAD>
  4. <TITLE>Элементы span в нормальном потоке</TITLE>
  5. <STYLE type="text/css">
  6.BODY { display: block; line-height: 200%;
  7. width: 300px; height: 400px }
  8.P { display: block }
  9.SPAN { display: inline }
10.#outer { color: red }
11.#inner { color: blue }
12.
13. </STYLE>
14. </HEAD>
15. <BODY>
16. <P>Начало страницы
17. <SPAN id="outer"> Начало элемента span
18. <SPAN id="inner"> Содержимое элемента span.</SPAN>
19. Конец элемента с классом outer.</SPAN>
20. Конец страницы.
21. </P>
22. </BODY>
23.</HTML>
24.

Сравните применение свойства position:relative; c первым примером. В этом примере элемент span с классом «outer» находятся в нормальном потоке, однако смещен от его первоначального положения на странице на 12 пикселей вверх. А элемент span с классом «inner» смещен вниз на 12 пикселей, в результате чего создаётся впечатление, что указанный элемент вовсе не был смещен.

  1.<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
  2.<HTML>
  3. <HEAD>
  4. <TITLE>Потоки в CSS</TITLE>
  5. <STYLE type="text/css">
  6.BODY { display: block; line-height: 200%;
  7. width: 300px; height: 400px }
  8.P { display: block }
  9.SPAN { display: inline }
10.#outer {position:relative;top:-12px; color: red }
11.#inner {position:relative;top:12px; color: blue }
12.
13.
14. </STYLE>
15. </HEAD>
16. <BODY>
17. <P>Тот, кто не
18. <SPAN id="outer">может наставить к добру своих домашних
19. <SPAN id="inner">, не может учиться сам.</SPAN>
20. </SPAN>
21. Конфуций
22. </P>
23. </BODY>
24.</HTML>
25.

Свойство position:relative; может создавать наложения элементов, для этого в предыдущем примере измените значение top на «-24px».

Плавающий поток (float)

  1.<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
  2.<HTML>
  3.<HEAD>
  4.<TITLE>Пример плавающего потока</TITLE>
  5.<STYLE type="text/css">
  6.img { float: right; }
  7.</STYLE>
  8.</HEAD>
  9.<BODY>
10.<img src="dom.jpg">
11.<P>Тот, кто не
12.может наставить к добру своих домашних, не может учиться сам. Конфуций</P>
13.</BODY>
14.</HTML>
15.
16.
Пример плавающего потока
Пример плавающего потока

Абсолютное позиционирование (position:absolute;)

В заключение мы рассмотрим пример при абсолютном позиционировании элементов inner и outer.

  1.<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
  2.<HTML>
  3.<HEAD>
  4. <TITLE>Элемент span со свойтсвом position:absolute</TITLE>
  5. <STYLE type="text/css">
  6.BODY { display: block; line-height: 200%;
  7. width: 300px; height: 400px }
  8.P { display: block }
  9.SPAN { display: inline }
10.#outer {
11. position: absolute;
12. top: 50px; left: 100px;
13. width: 200px;
14. color: red;
15.}
16.#inner { color: blue }
17.</STYLE>
18.</HEAD>
19.<BODY>
20. <P>Тот, кто не
21. <SPAN id="outer">может наставить к добру своих домашних,
22. <SPAN id="inner"> не может учиться сам.</SPAN>
23. </SPAN>Конфуций</P>
24.</BODY>
25.</HTML>
26.
Пример абсолютного позиционирования
Пример абсолютного позиционирования
Верхняя граница элемента с классом «outer» будет находиться на расстоянии 50 пикселей от верхней границы и 100 пикселей от левой границы ближайшего родительского элемента для данного элемента (так как в нашем случае он отсутствует, поэтому верхняя и левая границы будет определена исходным блоком).

Дочерний элемент (span с классом inner) родительского элемента (span с классом outer) будет размещаться относительно своего родительского элемента.

Наиболее важным примером для понимания тонкостей при применении абсолютного смещения является следующий пример.

  1.<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
  2.<HTML>
  3. <HEAD>
  4. <TITLE>Элемент span - не исходный элемент,
  5.исходный элемент для него - родительский элемент</TITLE>
  6. <STYLE type="text/css">
  7.BODY { display: block; line-height: 200%;
  8. width: 300px; height: 200px }
  9.P { display: block }
10.SPAN { display: inline }
11.#outer {
12. position: relative;
13. color: red
14.}
15.#inner {
16. position: absolute;
17. top: 100px; left: 0px;
18. height: 130px; width: 130px;
19. color: blue;
20.}
21.</STYLE>
22.</HEAD>
23. <BODY>
24. <P>Тот, кто не
25. <SPAN id="outer">может наставить к добру своих домашних,
26. <SPAN id="inner"> не может учиться сам.</SPAN>
27. </SPAN>Конфуций</P>
28. </BODY>
29.</HTML>
30.
Исходный элемент
Исходный элемент
Суть примера состоит том, что согласно спецификации CSS2, родительский элемент (со свойством position:relative;) содержащий дочерний элемент (со свойством position:absolute;) становится исходным элементом для последнего, то есть тем элементом, от верхней и левой границ которого происходит смещение дочернего элемента.

К примеру, уберите свойство position:relative; для родительского элемента и он перестанет быть исходным элементом для дочернего элемента (span с классом inner).


Александр Ермаков. Хостинг - www.pwstudio.org