Раскрытие блока с позиционированием, следить за перемещением кнопки?

Question

[Станислав]

Потребовалось написать раскрытие/скрытие блока по кнопке и прилепить раскрытый блок к самой кнопке.
jsfiddle.net/webphp/2ovfz9jk
Все работает, но есть серьезная проблема:
Если раскрыть блок и изменить размер браузера, кнопка перемещается, но блок стоит на месте.
Все это вызвано position: absolute и применению top, left отступов при позиционировании блока.
Как быть? Следить за перемещением кнопки и применять новые координаты блоку или можно придумать что нибудь другое?

Answer 1

[Станислав]

Вобщем вопрос решен, решил перемещать блок под кнопку, примерно тоже самое, но придется избегать overflow:hidden, что в принципе не столь критично.

Answer 2

[Александр Миранович]

Если я правильно понял суть задачи, то позиционируемый элемент нужно центрировать относительно центра, и сдвигать его на сколько нужно пикселей влево или вправо jsfiddle.net/2ovfz9jk/3

Comments

[Станислав]

Нет, не поняли ) Скрытый блок может находиться в любом месте страницы, поэтому при клике по кнопке я перемещаю его в начало документа и начинаю позиционирование. Скрытый блок может находиться в блоках родителях, которые могу помещать его отображению, например position:relative который не позволит прилепить блок к кнопке, или overflow:hidden и т.д., тем и вызвано копирование блока в начало документа.

[Александр Миранович]

ну так и копируйте его в начало документа, и выравнивайте только по высоте, узнавая offset().top у кнопки, а по центру центрируйте его относительно центра документа, а дальше margin-left или margin-right в зависимости, как вам надо, кнопка у вас всегда стоит по центру, как я понял.

[Станислав]

Александр Миранович: при чем тут центр? Это просто пример! У меня все работает то что вы описали выше. Возьмите и измените ширину правой нижней колонки при раскрытым блоком и все поймете. Я спрашиваю: Нужно следить за кнопкой во время изменения окна браузера и применять новые координаты блоку или есть что то более гибкое для данной реализации. Вот в чем заключается вопрос.

[Александр Миранович]

В данном примере у вас кнопка выровнена по центру, если так то я вам показал на примере как сделать так что бы не надо было отслеживать положение кнопки и передавать его блоку, всегда распологать его относительно центра и маржином чуть сдвигать куда вам надо, тогда при изменение ширины окна браузера блок будет стоять всегда на том же месте.

[Станислав]

Александр Миранович: если бы у меня все по центру было, я бы и позиционирование не делал и не перемещал бы блок, тут мне нужно более продвинутое решение, поэтому и интересуюсь. По центру блок в примере сделал специально чтобы наглядно можно было увидеть суть проблемы.

Answer 3

[ukoHka]

jsfiddle.net/h9nk48pL
Можно и без скриптов обойтись