Исходный элемент

Slyweb

Поиск CSS свойств и HTML элементов:

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

[Статья] Исходный элемент

Раздел "Визуальная модель документа"

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

Описание

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

Исходный корневой содержащий элемент определяется браузером пользователя.
Исходные содержание элементы других элементов, кроме элементов с абсолютным позиционированием, определяются границами ближайших элементов предков данных элементов.
Если элемент размещен фиксировано (со свойством position:fixed;), то исходным элементом для него будут окно браузера.
Для элементов с абсолютным позиционированием, содержащий элемент определяется ближайшим родительским элементом, имеющим свойство position (кроме тех, которые имеют свойством position:static;) при этом применяются следующие правила:
Если для элемента с абсолютным позиционированием нет ближайшего родительского элемента, то для данного элемента содержащим элементом будет окно браузера.

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

  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

Возможно, Вам будет интересно прочитать статьи о jQuery:

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>

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.

Подробный справочник CSS и HTML

Возможно, Вам будет интересно прочитать статьи о jQuery: