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



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

Содержащий элемент определяется следующим образом:

  1. Исходный корневой содержащий элемент определяется браузером пользователя.
  2. Исходные содержание элементы других элементов, кроме элементов с абсолютным позиционированием, определяются границами ближайших элементов предков данных элементов.
  3. Если элемент размещен фиксировано (со свойством position:fixed;), то исходным элементом для него будут окно браузера.
  4. Для элементов с абсолютным позиционированием, содержащий элемент определяется ближайшим родительским элементом, имеющим свойство position (кроме тех, которые имеют свойством position:static;) при этом применяются следующие правила:
  5. a) Для элементов, расположенных внутри блочных элементов исходный блок определяется внутренними отступами блочного элемента. b) Для строчных элементов исходный содержащий блок определятся свойством direction, следующим образом: a) Если свойство direction соответствует 'ltr', то содержащий блок определяется границами содержания строчного элемента, точнее верхней и левой границами блоков строчного элемента. b) Если свойство direction соответствует 'rtl', то содержащий блок определяется границами содержания строчного элемента, точнее верхней и левой границами блоков строчного элемента.
  6. Если для элемента с абсолютным позиционированием нет ближайшего родительского элемента, то для данного элемента содержащим элементом будет окно браузера.

Для следующего примера содержащие блоки указаны в таблице

  1.<HTML>
  2. <HEAD>
  3. <TITLE>Содержащие блок</TITLE>
  4. </HEAD>
  5. <BODY id="body">
  6. <DIV id="div1">
  7. <P id="p1">This is text in the first paragraph...</P>
  8. <P id="p2">This is text <EM id="em1"> in the
  9. <STRONG id="strong1">second</STRONG> paragraph.</EM></P>
10. </DIV>
11. </BODY>
12.</HTML>

Блок созданный Исходный блок
body Зависит от браузера
div1 Body
p1 div1
p2 div1
em1 p2
strong1 p2

Если мы изменим свойство position для элемента div1, например, так:

  1.div1 { position: absolute; left: 50px; top: 50px }
  2.
изменится, согласно указанным выше правилам определения содержащего блока, содержащий блок станет не body, а исходный содержащий блок для всех элементов.

Проверим остальные правила – измените свойство position для строчного элемента em, следующим образом:

  1.#div1 { position: absolute; left: 50px; top: 50px }
  2.#em1 { position: absolute; left: 100px; top: 100px }
  3.

  1.<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
  2.<HTML>
  3. <HEAD>
  4. <TITLE>Содержащий элемент</TITLE>
  5. <style type="text/css">
  6. BODY{
  7. border:2px solid red;
  8. }
  9. div{
10. border:2px solid blue;
11. margin:10px;
12. }
13. p{
14. border:2px solid green;
15. margin:10px;
16. }
17. em{
18. border:2px solid yellow;
19. margin:10px;
20. }
21.
22.#div1 { position: absolute; left: 50px; top: 50px }
23.#em1 { position: absolute; left: 100px; top: 100px }
24. </style>
25. </HEAD>
26.<BODY id="body">
27. <DIV id="div1">
28. <P id="p1">This is text in the first paragraph...</P>
29. <P id="p2">This is text <EM id="em1"> in the
30. <STRONG id="strong1">second</STRONG> paragraph.</EM></P>
31. </DIV>
32.</BODY>
33.</HTML>
34.
Тогда наша первоначальная таблица изменится соответствующим образом:
Блок созданный Исходный блок
body Зависит от браузера
div1 Зависит от браузера
p1 div1
p2 div1
em1 div1
strong1 em1


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