Jump to content
  • 0

Проблема с position:absolute на длинной по высоте LP


NDanilov2015
 Share

Question

Добрый день! Есть сайт http://valeodent.spb.ru/, представляющий длиннющую landing page, сделанную на темизированном Drupal 7. При щелчке по кнопке "Записаться" выходит форма, после заполнения которой посетитель должен увидеть сообщение типа "Заказ отправлен. В ближайшее время с вами свяжутся для уточнения деталей." - или сообщение об ошибке, если не все поля формы были заполнены. Сообщения реализуются через стандартные системные сообщения Drupal, но темизированы в файле .css шаблона сайта.

 

В шаблоне страницы page.tpl.php это сообщение выводится в блоке <div class="message">, который вложен в <div class="content-block">. Соответственно, поскольку content-block находится глубоко внизу, через долгую прокрутку браузера, сообщение исходно невидимо пользователем. И надо этот <div message> поднять в верхнюю часть окна браузера, чтобы посетители могли его увидеть!

 

Просто переставить этот div в заголовок header не получается - Drupal откажется печатать сообщения вообще. fixed-позиционирование непригодно для моего клиента т.к. блок неприятно стоит на месте при прокрутке содержимого, а должен уезжать вверх.

 

Остается использовать absolute позиционирование. У content-block указано position:static, т.е. вложенный в него message должен позиционироваться относительно окна браузера и всплыть наверх - однако, что-то не ладится и он позиционируется относительно своего родителя, так и оставаясь глубоко внизу(((

 

В чем дело? Почему не работает абсолютное позиционирование несмотря на static у родителя? Может быть из-за того, что Родитель находится глубоко "под днищем" окна браузера и требует долгой прокрутки к нему?

Link to comment
Share on other sites

1 answer to this question

Recommended Posts

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy