|
||
|
aranea.ru || Спецификация CSS2 | 9.8. Сравнение нормального перемещения, плавающего перемещения и абсолютного позиционирования.
9.8. Сравнение нормального перемещения, плавающего перемещения и абсолютного позиционирования.9.8.1. Нормальное перемещение.9.8.2. Относительное позиционирование. 9.8.3. Плавающее перемещение блока. 9.8.4. Абсолютное позиционирование. Для иллюстрации различий между нормальным расположением, относительным позиционирований, плавающим смещением и абсолютным позиционированием, мы предоставляем ряд примеров, основанных на следующем HTML-фрагменте:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<TITLE>Comparison of positioning schemes</TITLE>
</HEAD>
<BODY>
<P>Beginning of body contents.
<SPAN id="outer"> Start of outer contents.
<SPAN id="inner"> Inner contents. </SPAN>
End of outer contents. </SPAN>
End of body contents.
</P>
</BODY>
</HTML>
В этом документе, мы принимаем следующие правила:
BODY { display: block; line-height: 200%;
width: 400px; height: 400px }
P { display: block }
SPAN { display: inline }
Эти окончательные положения блоков, сгенерированных внешними и внутренними элементами, варьируют в каждом примере. Для каждой иллюстрации числа слева изображения указывают положение нормального расположения строк с двойным интервалом. (Обратите внимание: иллюстрации используют различные горизонтальные и вертикальные шкалы). 9.8.1. Нормальное перемещение.Рассмотрим следующие объявления CSS для outer и inner, которые не меняют нормальное расположение блоков:
#outer { color: red }
#inner { color: blue }
Элемент Р содержит все содержание строк: анонимный строковый текст и два элемента SPAN. Поэтому, все содержание будет располагаться в контексте строкового форматирования внутри объемлющего блока, учрежденного элементом Р, продуцирующего следующее:  [D]9.8.2. Относительное позиционирование.Для просмотра эффекта относительного позиционирования, мы определяем:
#outer { position: relative; top: -12px; color: red }
#inner { position: relative; top: 12px; color: blue }
Текст размещается нормально до элемента outer. Текст outer затем располагается в своей позиции нормального размещения, а размеры в конце строки равны 1. Затем, строчные блоки, содержащие текст (распределяется по трем строкам), смещаются на '-12px' (вверх). Содержание inner, как дочернего элемента outer, будет нормально размещаться немедленно после слов "of outer contents" (на строке 15). Однако, содержание inner само смещается относительно содержания outer на '12px' (вниз), назад к их первоначальному положению на строке 2. Обратите внимание на то, что содержание после outer не подвергается влиянию относительного позиционирования outer.  [D]Обратите внимание на то, что смещение outer было '-24px', текст outer и текст body будут перекрываться. 9.8.3. Плавающее перемещение блока.Теперь рассмотрим эффект плавающего смещения текста элемента inner направо по средством следующих правил:
#outer { color: red }
#inner { float: right; width: 130px; color: blue }
Текст располагается нормально до блока inner, который выдергивается из расположения и смещается к правому полю (его ширина 'width' точно определена). Строчные блоки слева от плавающего блока укорачиваются, и оставшийся текст документа располагается в них.  [D]Для показа эффекта свойства 'clear' мы добавим соседний элемент в пример:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<TITLE>Comparison of positioning schemes II</TITLE>
</HEAD>
<BODY>
<P>Beginning of body contents.
<SPAN id=outer> Start of outer contents.
<SPAN id=inner> Inner contents. </SPAN>
<SPAN id=sibling> Sibling contents. </SPAN>
End of outer contents. </SPAN>
End of body contents.
</P>
</BODY>
</HTML>
Следующие правила:
#inner { float: right; width: 130px; color: blue }
#sibling { color: red }
служат причиной того, что внутренний блок смещается направо как до этого, и оставшийся текст документа переходит в освободившееся пространство:  [D]Однако, если свойство 'clear' для соседнего элемента установлено, как 'right' (т.е. сгенерированный соседний блок не примет позиции следующей за смещающимися блоками справа), соседнее содержание начинает переход ниже смещения:
#inner { float: right; width: 130px; color: blue }
#sibling { clear: right; color: red }
 [D]9.8.4. Абсолютное позиционирование.В конце, мы рассмотрим эффект абсолютного позиционирования. Рассмотрим следующие объявления CSS для outer и inner.
#outer {
position: absolute;
top: 200px; left: 200px;
width: 200px;
color: red;
}
#inner { color: blue }
которые приводят к тому, что верх блока outer позиционируется с учетом его объемлющего блока. Объемлющий блок для позиционного блока учреждается самым ближайшим позиционным предком (или, если он не существует, начальный объемлющий блок, как в нашем примере). Верхняя сторона блока outer находится на '200px' ниже вершины объемлющего блока, а левая сторона находится на '200px' от левой стороны. Дочерний блок outer расположен нормально с учетом его родителя.  [D]Следующий пример показывает абсолютно позиционированный блок, который является дочерним для относительно позиционированного блока. Хотя родительский блок outer фактически не смещается, установка свойства 'position' на 'relative' означает, что его блок может служить, как объемлющий блок для позиционных потомков. Поскольку блок outer является внутристрочным блоком, который разбивается на несколько строк, верх первого внутристрочного блока и левые края (изображенные толстыми штриховыми линиями на иллюстрации) служат, как ссылки для смещений 'top' и 'left'.
#outer {
position: relative;
color: red
}
#inner {
position: absolute;
top: 200px; left: -100px;
height: 130px; width: 130px;
color: blue;
}
Это приводит к следующему результату:  [D] Если мы не позиционируем внешний блок:
#outer { color: red }
#inner {
position: absolute;
top: 200px; left: -100px;
height: 130px; width: 130px;
color: blue;
}
объемлющий блок для inner становится начальным объемлющим блоком (в нашем примере). Следующая иллюстрация показывает, где блок inner будет оканчиваться в этом случае.  [D] Относительное и абсолютное позиционирование может использоваться для выполнения изменяющихся черт, как показано в следующем примере. Следующий документ: <P style="position: relative; margin-right: 10px; left: 10px;"> I used two red hyphens to serve as a change bar. They will "float" to the left of the line containing THIS <SPAN style="position: absolute; top: auto; left: -1em; color: red;">-- </SPAN> word. </P> может привести к результату:  [D]Во-первых, параграф (чьи стороны объемлющего блока показаны на иллюстрации) размещается нормально. Затем он смещается на '10px' от левого края объемлющего блока (таким образом, правый край '10px' зарезервирован в ожидании смещения). Два дефиса, действующие, как изменяющиеся черточки, взяты из расположения и позиционированы в текущей строке (из-за 'top:auto'), '-1em' от левого края его объемлющего блока (учрежденного элементом Р в своей финальной позиции). Результат состоит в том, что измененные черточки кажутся смещенными ("float") налево текущей строки. |
