Форум

NDanilov2015 · #1 (**permalink**) 09.08.2015, 08:15

Добрый день! Есть сайт 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 у родителя? Может быть из-за того, что Родитель находится глубоко "под днищем" окна браузера и требует долгой прокрутки к нему?

EmperioAf · #2 (**permalink**) 09.08.2015, 10:02

Надеюсь вам помогут пару цитат на эту тему:

"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>

NDanilov2015 · #3 (**permalink**) 09.08.2015, 14:14

В том-то вся и загвоздка, что по всем канонам всё должно работать, я сам уже подобный Вашему тестовый пример на компе набросал - и тоже всё правильно позиционируется... а на живом Drupal-сайте ни в какую за пределы Родительского блока не выезжает наверх(((

Куда надо копать?

NDanilov2015 · #4 (**permalink**) 09.08.2015, 15:40

Проблема решена - если left указывать в процентах (left: 25%; скажем), а не в пикселях, то всё отлично работает! Но остается вопрос, в чем же загвоздка что left нельзя указать в пикселях...

NDanilov2015 · #5 (**permalink**) 09.08.2015, 16:11

Тьфу ты, я лоханулся по-полной((( я писал "px" и их величину раздельно, через пробел, а надо слитно - и тогда всё работает и с пикселями! Вот что значит когда PHP-программист полез во фронтенд потому что больше некому было(

Форум

Справочник

Discord чат

Курсы javascript