Как правильно прописать z-index чтобы плавающая форма перекрывала footer?

Question

[bassoon48]

В общем, есть сайт с проблемой.

Когда регистрируется НОВЫЙ пользователь он должен ввести код подтверждения в плавающую форму.


В свойства header я прописал z-index: auto (можно и 0, без разницы).

Область хэдер стала серой как и положено.

А вот область footer если ввести z-index: 0 или 999999999999999999999 ей вообще пофиг.
Если сделать z-index: -1 то область footer станет серой.
Но будет ПРОБЛЕМА: ссылки в меню перестанут нажиматься. Так что это не выход...

Но самая главная проблема это вот:


А должно быть так (если z-index сделать -1):


Помогите пожалуйста решить данную проблему.
Ссылка удалена модератором. (можете указывать левую почту или тестовые почты ботов - я всё равно базу данных почищу)

Comments

[Вадим]

Это так не работает. У Вас модалка вложена в main. Если main не выше footer по z-index, то модалка НИКОГДА не перебьёт footer.
https://developer.mozilla.org/ru/docs/Web/CSS/CSS_...

А ещё footer у вас не прижимается к низу вьюпорта, если недостаточно контента.

[Вадим]

bassoon48,

как быть?

Ну, мне кажется, из моего комментария логично следует - вынести модалку на один уровень с footer.

как сделать чтоб прижимался footer

Окей гугл: как сделать чтоб прижимался footer

Ну и всегда есть другой путь: https://freelance.habr.com/

[Вадим]

bassoon48,

зачем мне эту шляпу выносить на фриланс которая решается за 30 секунд

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

[Ankhena]

bassoon48, футеру понизить или убрать z-index, обертке main на том же уровне, что и футер - повысить до 1 (или больше чем у футера). Предварительно выяснить, зачем вам все эти 999. От гигантомании или это чем-то оправдано.

Чтобы разобраться что происходит и как работает z-index, гуглить про контекст наложения.

[Ankhena]

bassoon48,

За наводку спасибо - гляну

Прямая ссылка, кстати, есть в первом комментарии Вадима.

[Модератор]

Не надо ставить как можно больше тэгов. Лучше оставить один, но конкретный, с которым проблема.
См.п.3.1 Регламента.

[Модератор]

На вопрос «как сделать» отвечает документация и поиск в интернет.

Тут отвечают на вопросы «почему я сделал, как в документации, а оно не работает. Поискал в интернет, вот запросы, в ответах не нашел. Что я делаю не так?»

Покажите, как вы пробовали решить проблему, приведите код попытки (пусть неудачной), опишите, как запускали, что ожидали и что получилось.
За готовыми решениями - на фриланс. В текущем виде это не вопрос, а задание. Нарушен п.5.12 Регламента.

[bassoon48]

Модератор, вот что я сделал но у меня не получается. В интернете искал

[bassoon48]

Модератор, и да модератор, скажите пожалуйста, вот если у меня проблема с сайтом как мне прикреплять ссылку на сайт чтобы не нарушать требования?

Потому что 99% вопросов по woocommerce ТРЕБУЮТ наличия ссылки на проблемный сайт

[Модератор]

bassoon48, в случае, если проблема в 5 тэгах одновременно и при этом не нарушается Регламент, особенно п.3.1
Полагаю, вероятность такого события не нулевая, но стремится к нулю.

[Модератор]

bassoon48, никак ссылку не прикреплять.

Со ссылкой на свой сайт - на фриланс, пожалуйста. Тут это может попадать под п.5.6, 5.7, 5.12 и т.п.
И потом: вот вы исправите свой сайт и во что превратится такой вопрос со ссылкой? В тыкву. Он никому не принесет пользы, т.к. проблема будет не видна уже.

Вам надо самому найти конкретную проблему. Показать компактный фрагмент кода (конфига и т.п.), в котором по вашему мнению проблема; показывать вашу версию, которая должна исправить проблему, но не исправляет.

[bassoon48]

Модератор, сложна...понял, спасибо

[bassoon48]

Вадим, Сенсей, возможен ли такой вариант.

Кароче у меня сайт построен как я понял таким образом. Header, content и footer.

Изначально Header имел 999 индекс, футер 997, а центральный блок контент ничё не имел.

Я сделал так: header 998, footer не трогал (997).

А вот центральный блок я сделал position:relative и z-index: 998

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

Вопрос на миллион. Чем чревевато что я поставил position: relative вместо static для центрального блока?

[bassoon48]

Вадим, я щас сюда по бырику скину ещё раз ссылку (или она у вас сохранилась?)

genreeds.ru

П. С. чуть позже буду писать фильтр чтоб отсеивать фейк email и допилю блок footer чтоб не было пустого места

[bassoon48]

Вадим, чё ещё странно что header и центральный блок div имеют индексы 998 но центральный блок выше хэдера.

Это потому что сама модалка выше всех? с индексом 5000 вроде

[Вадим]

bassoon48, ссылка в истории браузера сохранилась, но сейчас уже не за компом, посмотреть смогу завтра

[bassoon48]

Вадим, пасяб.
Я тут ещё добавил код через Grid который по идее должен "притягивать" footer к низу.
Вроде как работает но я не уверен что всё сделал правильно.

body { margin: 0; }
   html {
    min-height: 100%;
   }
   body {
    min-height: 100%;
    display: grid;
    grid-template-rows: 1fr auto;
   }
   footer {
        display: grid!important;
    grid-row-start: 4;
    grid-row-end: 4;
   }

div#wpadminbar {height: auto!important; min-width: auto!important; position: fixed!important}
div#page {display: grid}

Если заходить без админской панели сверху то пустого пространства вроде как нет.

А если захожу с админской панелью сверху - то проплешина внизу есть. Как пока победить не знаю...Думаю.

П. С. лечится пока только если контент бахнуть :D



Это нужно админскую панель допилить? для мобилок

[bassoon48]

bassoon48, а вот так без панели


П. С. в данном случае HTML растянут на весь экран (голубая область).

А в первом случае html не на весь экран заезжает. Откровенный баг какой-то или недоработка.

Какой же WP забагованный просто борода, все мелочи пилю руками))

[Вадим]

bassoon48,

Вопрос на миллион. Чем чревевато что я поставил position: relative вместо static для центрального блока?

Элементы с position: absolute позиционируются относительно ближайшего не static родителя. Соответственно, если где-то внутри будет элемент с position: absolute и не будет у этого элемента другого родителя с position: relative, то этот элемент будет позиционироваться относительно вашего, так называемого content, которому Вы задали posiiton: relative.

чё ещё странно что header и центральный блок div имеют индексы 998 но центральный блок выше хэдера.

В контексте наложения играют роль не только установленные z-index, но и порядок разметки. Таким образом, если убрать вообще все z-index, то чем ниже блок в DOM-дереве, тем выше он по z-index. Соответственно, если у двух элементов, находящихся на одном уровне в разметке одинаковый z-index, то выше будет тот, что ниже в разметке.

А если захожу с админской панелью сверху - то проплешина внизу есть. Как пока победить не знаю...Думаю.

Ну это нужно уже через инспектор разметки смотреть почему так происходит. Значит где-то что-то либо начинает выпирать, либо с админской панелью какие-то другие стили\классы у элементов появляются.