относительное позиционирование

[chi]

Есть блочный элемент, который активируется изменением свойства display (block | none) с помощью JavaScript.

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

З.Ы. Все элементы находятся внутри родительского блока (position: relative).

[DjTarik]

position: absolute;

top: ?;

left: ?;

right: ?;

bottom: ?;

- элемент не будет участвовать в потоке...

[chi]

position: absolute; не подходит.

Все элементы находятся внутри родительсного блока.

[DjTarik]

и чем же он не подходит? =)

p.S. Тогда давай код и конкретно, что нужно получить...

[dyadya]

Вместо display (block | none) используйте visibility: visible | hidden и z-index. Позиционирование нарушаться не будет...

[chi]

и чем же он не подходит?

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

Вместо display (block | none) используйте visibility: visible | hidden и z-index.

Спасибо. Как раз то что нужно.

З.Ы. Пока ждал ответа нашёл ещё один способ: Динамический блок поместить в другой блок, который имеет фиксированную высоту. Если эту высоту задать равной высоте динамического блока, переключение свойства display не повлияет на другие элементы.

[chi]

Ещё вопрос: при использовании visibility: hidden блок не отображается, но место под себя резервирует. Поэтому, что бы не оставлять пустого места пришлось для последующих элементов делать отрицательное смещение по вертикали (свойство top). Как то можно этого избежать ?

Есть какой-нибудь способ позиционировать блочный элемент, относительно родительского блока, не влияя на другие элементы?

Edited June 20, 2009 by chi

[DjTarik]

Вы же сами писали:

З.Ы. Все элементы находятся внутри родительского блока (position: relative).

Почему же тогда нельзя через position: absolute; ? Как раз в вашем случае, по идее, это то, что нужно... Т.к. если у родительского блока прописать relative, а дочернему absolute - выравнивание будет происходить имеено относительно блока, а не экрана...

[chi]

Т.к. если у родительского блока прописать relative, а дочернему absolute - выравнивание будет происходить имеено относительно блока, а не экрана...

Странно, почему то всегда думал что absolute позиционирует только относительно экрана...

absolute Указывает, что элемент абсолютно позиционирован. В этом случае он не существует в обычном потоке документа подобно другим элементам, которые отображаются на веб-странице словно абсолютно позиционированного объекта и нет. Положение элемента задается атрибутами left, top, right и bottom относительно края окна браузера.

http://www.htmlbook.ru/css/position.html

З.Ы. Теперь всё работает отлично. Спасибо огромное!

[PCSpeaker]

.popup a {
position:relative;
}

.popup a span{
	position:absolute;
	display: none;
	top: 20px;
	left: 20px;
	z-index: 1;
	background: #FFFFFF;
}

.popup a:hover span {
	display: block;
}

Вот код страницы:
<span class="popup"><a href="">Ссылка<span>Всплывающий текст</span></a></span>

У меня вроде бы похожая ситуация. В Firefox, Chorme и IE7 работает нормально, а вот в Opera часть (те элементы что снизу экрана) показывается не там где нужно (те что сверху экрана работают нормально), а в IE6 не работает вовсе. В чем моя ошибка? (Visibility пробовал использовать, ситуация не изменилась)

Edited June 21, 2009 by PCSpeaker