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



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

Допустимые значения свойства:

static Блок размещается как обычно для нормального потока. При этом значении свойства top и left не применяются.
relative Позиция блока устанавливается с помощью свойств 'left', 'right', 'top', и 'bottom'. Указанные свойства определяют смещение, соответственно от верхнего, левого , правого и нижнего краёв, относительно содержащего блока. Данное свойство удаляет блок из нормального потока. Такой элемент не будет иметь ни какого влияния на элементы, соотносящиеся с ним как «брат и сестра».
absolute Позиция блока устанавливается с помощью свойств 'left', 'right', 'top', и 'bottom'. Данные свойства определяют смещение относительно содержащего блока. Данное свойство удаляет блок из нормального потока. Такой элемент не будет иметь ни какого влияния на элементы, соотносящиеся с ним как «брат и сестра».
fixed Позиция элемента устанавливается схожим образом с абсолютным позиционированием, но в дополнение к этому элемент становится зафиксированным. Элемент фиксируется относительно экрана или страницы, фиксация зависит от типа медиа, который устанавливается правилом @media.

В CSS2 элементы размещаются в следующих потоках:

  1. Нормальный поток (блочные элементы, строчные элементы, относительное размещение (position:relative) и размещение элементов с типами compact и run-in);
  2. «Плавающий» поток. В плавающем потоке элемент выходит из нормального потока и в зависимости от наличия возможности перемещается направо или налево (плавающий поток устанавливается с использованием свойства float) /
  3. Абсолютное размещение (position:absolute). При абсолютном размещении элемент удаляется из нормального потока элементов (данный элемент не влияет на последующие элементы, соотносящиеся с ним как элементы «дети одних родителей»).

Свойства строковых блоков:

Элемент с относительным позиционированием находится в нормальном потоке, но может смещаться относительно своей позиции. Смещаемый элемент не оказывает влияния на последующие элементы. Однако с помощью относительного размещения элементов создаётся эффект наложения одного элемента на другой.

Пример наложения одного элемента на другой:

  1.<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
  2.<HTML>
  3. <HEAD>
  4. <TITLE>Свойство position:relative</TITLE>
  5. <STYLE type="text/css">
  6. .first {width:150px;border:2px solid red;}
  7. .second {
  8. width:270px;
  9. border:2px solid blue;
10. position:relative;
11. top:20px;
12. left:150px;}
13. .thrid {width:150px;border:2px solid green;}
14. </STYLE>
15. </HEAD>
16.<BODY>
17.<div class="first">Первый блок с нормальным позиционированием</div>
18.
19.<div class="second">Относительно
20.размещенный блок не оказывает влияние
21.на последующие блоки, расположенные в
22. нормальном потоке позиционирования.
23. Создаётся впечатление, что блок будто
24. и не был удален из структуру документа,
25. в которой он был бы размещен без
26. применения свойства position:relative.</div>
27.
28.<div class="thrid">Второй блок с нормальным позиционированием</div>
29.</BODY>
30.</HTML>
31.

Относительное размещение блока создаётся с применением свойства 'position' для элемента и указанием в качестве его значения relative. Смещение, относительно размещаемых элементов задаётся свойствами 'top', 'bottom', 'left', и 'right'.

С помощью динамического изменения смещения, относительно размещаемых элементов, создаются анимационные эффекты во многих современных фреймовиках. Одним из возможных вариантов применения относительного размещения можно указать создание надстрочных (верхний индекс) и подстрочных надписей.

Пример создания надстрочного (верхнего индекса):

  1.<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
  2.<HTML>
  3.<HEAD>
  4. <TITLE>Пример надстрочного индекса</TITLE>
  5. <STYLE type="text/css">
  6. .second {font-size:15px;}
  7. .secondem{
  8. position:relative;
  9. top:-8px;
10. left:0px;
11. font-size:12px;}
12. </STYLE>
13.</HEAD>
14.<BODY>
15.<div class="second">Строчные блоки располагаются
16.горизонтально друг за другом.
17.При этом расстояние между ними
18.определяется тремя CSS свойствами:
19.padding, margin, border.
20.Строчные блоки выравниваются различными способами;
21.вертикально, горизонтально,
22.по центру.<em class="secondem">Это надстрочный индекс</em></div>
23.</BODY>
24.</HTML>
25.

Подробное описание и примеры Вы найдёте в разделе «Отличия нормального потока размещения элементов от плавающего и абсолютного размещения».

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

  1.<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
  2.<HTML>
  3. <HEAD>
  4. <TITLE>Элемент спан - не исходный элемент,
  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.

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

Фиксированное размещение элементов как разновидность абсолютного размещения.

Единственное отличие фиксированного размещения от абсолютного состоит в том, что устанавливается оно относительно экрана, а не документа.

При фиксированном размещении элементов на странице элемент устанавливается на одном месте страницы и при перемещении страницы, с помощью скроллинга не передвигается.

При использовании медиа типа page, фиксированный элемент при печати странниц будет отображаться на каждой из них.

Один из вариантов применения фиксированного размещения элементов:

  1.<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
  2.<HTML>
  3. <HEAD>
  4. <TITLE>Фреймы в CSS2</TITLE>
  5. <STYLE type="text/css">
  6. BODY { height: 8.5in }
  7. #header {
  8. border:2px solid grey;
  9. position: fixed;
10. width: 100%;
11. height: 15%;
12. top: 0;
13. right: 0;
14. bottom: auto;
15. left: 0;
16. }
17. #sidebar {
18. border:2px solid grey;
19. position: fixed;
20. width: 10em;
21. height: auto;
22. top: 15%;
23. right: auto;
24. bottom: 100px;
25. left: 0;
26. }
27. #main {
28. border:2px solid grey;
29. position: fixed;
30. width: auto;
31. height: auto;
32. top: 15%;
33. right: 0;
34. bottom: 100px;
35. left: 10em;
36. overflow:scroll;
37. }
38. #footer {
39. border:2px solid grey;
40. position: fixed;
41. width: 100%;
42. height: 100px;
43. top: auto;
44. right: 0;
45. bottom: 0;
46. left: 0;
47. }
48. </STYLE>
49. </HEAD>
50. <BODY>
51. <DIV id="header"> ... </DIV>
52. <DIV id="sidebar"> ... </DIV>
53. <DIV id="main"> ... </DIV>
54. <DIV id="footer"> ... </DIV>
55. </BODY>
56.</HTML>
57.


Доступ и установка с jQuery

  • Получить свойство position: val = $("div").css("position");
  • Установить свойство position: $("div").css({"position":"..."});
  • Установить свойство position: $("div").css("position","...");
  • Как использовать популярный jQuery для свойств CSS, - читайте статью "jQuery для начинающих".
Александр Ермаков. Хостинг - www.pwstudio.org