Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 27.01.2011, 05:18
Аспирант
Отправить личное сообщение для JSTalker Посмотреть профиль Найти все сообщения от JSTalker
 
Регистрация: 29.06.2009
Сообщений: 92

Абсолютное и относительное позиционирование.
Я изучаю по 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]?

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

Пролейте свет, мне на относительное позиционирование товарищи, плиз)
Ответить с цитированием
  #2 (permalink)  
Старый 27.01.2011, 05:50
Аватар для Aetae
Тлен
Отправить личное сообщение для Aetae Посмотреть профиль Найти все сообщения от Aetae
 
Регистрация: 02.01.2010
Сообщений: 6,590

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

P.S. Поме-ше упо-ляй сок-ний, них-на неп-но ведь.
Ответить с цитированием
  #3 (permalink)  
Старый 27.01.2011, 06:19
Аспирант
Отправить личное сообщение для JSTalker Посмотреть профиль Найти все сообщения от JSTalker
 
Регистрация: 29.06.2009
Сообщений: 92

Aetae,
хор-шо Спасибо
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Позиционирование JSprog (X)HTML/CSS 8 04.10.2014 17:44
позиционирование элемента KOLANICH Элементы интерфейса 2 10.10.2010 22:55
позиционирование Ext.Window underW ExtJS 1 09.07.2010 13:17
Позиционирование картинки FightInGlory Events/DOM/Window 5 06.07.2010 14:27
позиционирование div underW (X)HTML/CSS 3 01.09.2009 01:02