Проблема с position:absolute на длинной по высоте Landing Page
Добрый день! Есть сайт 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 у родителя? Может быть из-за того, что Родитель находится глубоко "под днищем" окна браузера и требует долгой прокрутки к нему? |
Надеюсь вам помогут пару цитат на эту тему:
"position: static Статическое позиционирование производится по умолчанию, в том случае, если свойство position не указано." "absolute Указывает, что элемент абсолютно позиционирован, при этом другие элементы отображаются на веб-странице словно абсолютно позиционированного элемента и нет. Положение элемента задается свойствами left, top, right и bottom, также на положение влияет значение свойства position родительского элемента. Так, если у родителя значение position установлено как static или родителя нет, то отсчет координат ведется от края окна браузера." И кстати написанное выше работает:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="Keywords" content="">
<meta name="description" content="">
<title>ГГ</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<style>
*{
margin:0;
padding:0;
outline: 0;
}
.static-position {
position: static;
width: 80px;
height: 80px;
margin: 50px;
border: 1px solid red;
}
.absolute-position {
position: absolute;
width: 80px;
height: 80px;
border: 1px solid green;
font-size: 10px;
left: 10px;
top: 10px;
}
</style>
</head>
<body>
<div class="static-position">
<div class="absolute-position">Абсолютно спозиционированный блок внутри статически спозиционированного</div>
</div>
</body>
</html>
|
В том-то вся и загвоздка, что по всем канонам всё должно работать, я сам уже подобный Вашему тестовый пример на компе набросал - и тоже всё правильно позиционируется... а на живом Drupal-сайте ни в какую за пределы Родительского блока не выезжает наверх(((
Куда надо копать? |
Проблема решена - если left указывать в процентах (left: 25%; скажем), а не в пикселях, то всё отлично работает! Но остается вопрос, в чем же загвоздка что left нельзя указать в пикселях...
|
Тьфу ты, я лоханулся по-полной((( я писал "px" и их величину раздельно, через пробел, а надо слитно - и тогда всё работает и с пикселями! Вот что значит когда PHP-программист полез во фронтенд потому что больше некому было(
|
| Часовой пояс GMT +3, время: 06:13. |