Javascript-форум (https://javascript.ru/forum/)
-   (X)HTML/CSS (https://javascript.ru/forum/xhtml-html-css/)
-   -   Абсолютное и относительное позиционирование. (https://javascript.ru/forum/xhtml-html-css/14703-absolyutnoe-i-otnositelnoe-pozicionirovanie.html)

JSTalker 27.01.2011 05:18

Абсолютное и относительное позиционирование.
 
Я изучаю по JS (+CSS) Флэнэгану, он пишет:

трех других значений.
Цитата:

absolute
Это значение позволяет задать абсолютную позицию элемента относительно содержащего его элемента. Такие элементы позиционируются независимо от всех остальных элементов и не являются частью потока статически позиционированных элементов. Абсолютно позиционированный элемент позиционируется либо относительно тела документа, либо, если он вложен в другой абсолютно позиционированный элемент, относительно этого элемента. Это наиболее распространенный в DHTML тип позиционирования. В IE 4 абсолютное позиционирование поддерживается лишь для некоторых элементов. Чтобы
организовать абсолютное позиционирование в устаревших броузерах, требуется обернуть абсолютно позиционируемые элементы в теги <div> или <span>.
Цитата:

relative
Если атрибут position установлен в значение relative, элемент располагается в соответствии с нормальным потоком вывода, а затем его положение смещается относительно его обычного положения в потоке. Пространство, выделенное для элемента в нормальном потоке вывода документа, остается выделенным для него, и элементы, расположенные со всех сторон от него, не смыкаются для заполнения этого пространства и не выталкиваются с новой позии
ции элемента.
По определению, относительное позиционирование - это когда блок выводится в нормальном потоке и смещается (если указано смещение) относительно себя же в нормальном потоке.

Т.е. о сути - оно имеет смысл только при задании свойств смещения top, left etc. Иначе (если все по нулям), это обычный поток вывода, не?

Но его (о. поз-е) часто применяют, чтобы в о. поз-ый блок вставить абс-но поз-ый блок, типа чтобы он позиц-ся относ-но блока а не всей страницы.

Еще мне трудно такой его пример:

<div style="font: bold 32pt sanssserif;"> <!!! тени лучше выглядят с крупным шрифтом   >
<!!! Текст с тенью должен иметь относительное позиционирование, чтобы   >
<!!! можно было обеспечить смещение тени относительно нормального   >
<!!! положения текста в потоке вывода   >
<span style="position:relative;">  <!--[1]-->
<!!! Далее определяются три тени различных цветов с использованием   >
<!!! абсолютного позиционирования для смещения их на разные расстояния  -- >
<!!! относительно обычного текста --  >
<span style="position:absolute; top:5px; left:5px; color: #ccc">С тенью</span>
<span style="position:absolute; top:3px; left:3px; color: #888">С тенью</span>
<span style="position:absolute; top:1px; left:1px; color: #444">С тенью</span>
<!!! Далее следует собственно текст, который отбрасывает тень. Здесь-- >
<!!! также имеет место относительное позиционирование, чтобы текст   >
<!!![U] выводился поверх своих теней [/U]  >
<span style="position:relative">С тенью</span>
</span>
| Без тени<!!! Для сравнения   этот текст не отбрасывает тень  -- >
</div>

Про то что о. поз-ый элемент выводится поверх абсол-но поз-х нигде не нашел. Но зачем ставится корневой относит-но поз-ый эл-т[1]?

Ведь согласно определению - это блок нормально выводящийся в обычном потоке документа и без смещений. (Я то конечно уюедился, что без него там все коряво будет, н понять работу так и не смог).

Пролейте свет, мне на относительное позиционирование товарищи, плиз)

Aetae 27.01.2011 05:50

Ну как-бэ всё из примера ясно.
1. Позиционированные( position:relative/absolute/fixed ) элементы отображаются всегда поверх простых(position:static).
2. В случае если несколько элементов наезжают друг на друга, то, если не определён z-index, они располагаются по очереди появления в документе(учитывая п.1).

P.S. Поме-ше упо-ляй сок-ний, них-на неп-но ведь.

JSTalker 27.01.2011 06:19

Aetae,
хор-шо:lol: Спасибо:)


Часовой пояс GMT +3, время: 07:21.