Краткое описание свойств позиционирования CSS

Каждый день на этой неделе мы будем публиковать статью, отобранную нашим редактором, в рамках CSS Theme Week .

Эта статья предназначена для опытных разработчиков CSS, которым нужна ссылка на свойства, связанные с позиционированием в CSS 2. Каждый раздел этой статьи содержит ссылку на соответствующий раздел Справочника по CSS для SitePoint и Спецификации W3C CSS 2.

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

Определения

Сначала давайте рассмотрим несколько определений понятий, которые необходимо объяснить. Вы можете пропустить его, если хотите, и использовать этот список для справки, чтобы проверить, не наткнулись ли вы на что-то. Конечно, не забывайте, что ссылка на SitePoint CSS содержит исчерпывающую информацию обо всех свойствах, а не только тех, которые здесь собраны.

Окно просмотра
http://www.w3.org/TR/REC-CSS2/visuren.html#q2

Окно просмотра — это область экрана, в которой отображается ваша веб-страница. Это не то же самое, что начальный содержащий блок.

Начальный Содержащий Блок
http://www.w3.org/TR/REC-CSS2/visuren.html#initial-containing-block

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

Можно ограничить размер исходного содержащего блока, задав свойства widthheight

Корневой элемент

Корневым элементом является элемент html Когда мы применяем правила CSS к корневому элементу, безопаснее (позволяет браузерам делать то, что они хотят) применять их как к элементу htmlbody

 html, body { 

  /* Style Rules Here */ 

}

Однако при таком подходе следует проявлять осторожность, потому что чистый эффект потенциально может усугубиться. Например, выполнение следующих действий приведет к тому, что к каждому краю страницы будет применен отступ в 100 пикселей — по 50 пикселей для каждого элемента.

 html, body {  

  padding:50px; 

}

Содержащие блоки
содержащий блок . Это элемент блока, который находится внутри, например:

 <div id="content"> 

  <div id="example"> 

  </div> 

</div>

div#contentdiv#example

 <p>Test</p> 

<p>Text</p>

 Test 


Text

 Test Text

 <strong>Test</strong> 

<em>Text</em>

 Test Text

 Test 


Text

 display:none

 position:static;

 position:relative;

 position:absolute;

 position:fixed;

 float:right;

 Коробка всплывает справа от экрана.
 float:left;

 Коробка всплывает слева от экрана.
 float:none;

 Коробка не всплыла.
  clear 
  TTP: //www.w3.org/TR/REC-CSS2/visuren.html#flow-control 
  Это свойство используется для управления полями, которые появляются после всплывающего окна.  Установка этого свойства в поле гарантирует, что оно будет отображаться ниже любых всплывающих окон, предшествующих ему. 
 clear:left;

 Это поле будет отображаться под любыми левыми полями, которые находятся перед ним.
 clear:right; 

 Это поле будет отображаться под любыми всплывающими справа квадратами. 
 clear:both; 
  Это поле будет отображаться под любыми плавающими слева или справа плавающими квадратами. 
 clear:none; 

 Этот ящик не очистит плавающие ящики, стоящие перед ним. 
  Свойство z-index 
  http://www.w3.org/TR/REC-CSS2/visuren.html#q30 
  Свойство z-index  z-indexz-index  Если оба имеют одно и то же значение, то последнее в коде отображается сверху.