Есть ли способ перебить z-index?

Question

[ilovemaryjane]

Есть ли способ сделать элемент one поверх элемента two?

<div> // position: fixed
  <div>
    <div class="one"><div> // z-index: 10
    <div class="other"><div>
  <div>
<div>
<div> // position: fixed
  <div class="two"><div> // z-index: 10
<div>

Естественно без присваивания большего индекса родителям элемента one, т.е. это сломает оверлей. Надо "достать" именно конкретные элементы из контейнера, а не сделать весь контейнер поверх.

АПД репродукция https://codepen.io/kode88/pen/MzGjVR

Answer 1

[xmoonlight]

Конечный вариант (one - сверху, two - под one, other - внизу)
https://codepen.io/xmoonlight/pen/KrRgxJ

Comments

[ilovemaryjane]

Это не поможет

[ilovemaryjane]

Добавил, там у родителей // position: fixed

[xmoonlight]

ilovemaryjane, ну я имел ввиду внешний контейнер от two.

[ilovemaryjane]

xmoonlight, у контейнера индекса вообще нету!

[ilovemaryjane]

Сделал репродукцию https://codepen.io/kode88/pen/MzGjVR

[ilovemaryjane]

xmoonlight,

Поменять вывод слоёв местами,

Что это значит?

[xmoonlight]

ilovemaryjane, обновил ответ. Так нужно?

[ilovemaryjane]

xmoonlight, теги побиты, я не пойму что во что вложено.

[xmoonlight]

ilovemaryjane, у тебя тоже побиты, откуда я форкал... обнови - я поправил.

[ilovemaryjane]

Но нет, не так. header на заднем плане надо. two посредине.

[ilovemaryjane]

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

[xmoonlight]

ilovemaryjane, ну вот только так... как я понял... (обнови)

[xmoonlight]

ilovemaryjane, сделал other - посередине. смари!

[ilovemaryjane]

xmoonlight, ну блин так это ж тоже самое! Элемент two должен быть ПОСЕРЕДЕНИЕ))

[ilovemaryjane]

Последнй вариант не подходит. Ты изменил структуру хтмл, так мне не надо)

[xmoonlight]

ilovemaryjane, не менял я структуру. расширь область кода (ресайз) - там переносы по пробелам наверное...

[ilovemaryjane]

xmoonlight, ты поменял структуру полностью. В моем коде 2 корневых дива, у тебя все свалено в один.

[xmoonlight]

ilovemaryjane, я уже понял, да... пытаюсь, но пока никак... возможно, что и никак нельзя...
А через JS реструктурировать да и всё?! Тоже не катит?)

[ilovemaryjane]

xmoonlight, в смысле реструктурировать?

[xmoonlight]

ilovemaryjane,

ты поменял структуру полностью. В моем коде 2 корневых дива, у тебя все свалено в один.

Налету поменять иерархию вложенности и сделать разметку так, чтобы всё работало?))

[ilovemaryjane]

xmoonlight, ну а смысл? Я специально вынес это из хедера. Не совсем понятно что предлагаешь? Что куда менять? Обратно в хедер?) Я не могу его в хедер, потому что он фиксед с трансформом. А трансформ ломает верстку у этого элемента.

[xmoonlight]

ilovemaryjane, я предлагаю реструктурировать ноды с использованием JS.
Чтобы понять как и для чего - надо понять, что ты хочешь добиться.
Т.к. пока - мне известна только половина задачи.
А при такой постановке задачи, как правильнее сделать - нереально предположить.))

[ilovemaryjane]

xmoonlight, верхняя нода это фиксированный хедер с трансформом.
Вторая нода это оверлей меню на весь экран, которое открывается кнопкой из хедера.
Я вынес вторую ноду отдельно, потому что трансформ + фиксед ломают оверхей.
Но мне надо не просто оверлей на весь экран, надо чтобы логотип и кнопка их хедереа были ПОВЕРХ оверлей.

Вот это и есть задача. Мне надо впиндюрить оверлей между хедером и элементами из этого же хедера))
Если бы я мог перенести оверлей в хедер я бы не создавал эту тему))

[xmoonlight]

ilovemaryjane, а почему нельзя открыть оверлей сразу ПОД хидером?!

[ilovemaryjane]

xmoonlight, ну так а сейчас он где открывается как не под хедером?))

[xmoonlight]

ilovemaryjane,

.two {
  position: fixed;
  top: 0; /*<-------- НЕТ! :) */

[ilovemaryjane]

xmoonlight, понял. Ну потому что у хедера есть свой цвет, есть другие элементы которые мне не нужны. Мне надо показывать только лого и кнопку. Ну и в целом это кривой хак, полноэкранное меню не на весь экран?)

[xmoonlight]

ilovemaryjane, ну...... тут не получится и рыбку...., и.... не подавиться)
Обычно - все оверлеи не просят ничего.
У тебя - запрос: "оставьте мой хидер на месте при любом full-page оверлее!"
Суть понятна?)

[xmoonlight]

ilovemaryjane, вариант 2!
При открытии оверлея - копируешь ноду нужных элементов с хидера и воссоздаёшь на самом оверлее.

[ilovemaryjane]

xmoonlight, мне не нужен хедер, мне нужны 2 элемента из него)

Вообще конечно проблемы бы не было, если бы неприятный сюрприз с фикседом и трансформом, которого я не ожидал. Почему он ломает фулскрин, не в курсе? Может это можно починить и тогда я не буду себе ломать мозг как реструктурировать верстку? Ломает именно когда трансформ на фиксед элементе. Если просто фиксед то все ок.

[xmoonlight]

ilovemaryjane, Раз "просто фиксед - всё ок", то может проще подумать: в каких случаях обязателен трансформ и сделать его не постоянным, а только в каких-то моментах?
Может это поможет или избавиться от него, или понять, где накладывать/снимать этот трансформ только через JS только тогда, когда это нужно?

[ilovemaryjane]

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

[xmoonlight]

ilovemaryjane, ну так об этом я и говорю. О компоненте! А не обо всём коде конкретного проекта.
Ну или просто:
1. При открытии оверлея - ставим его ниже хидера (top, высотой с хидер)
2. Скрываем ненужные элементы на хидере.
3. По закрытию оверлея - вновь показываем скрытые.