Как сделать, чтобы текст из data атрибута перекрывал весь блок?

Question

[olya_097]

когда у блока есть класс active
https://jsfiddle.net/Lz70yqh2/

Comments

[Ankhena]

Он и так перекрывает. Фон задайте. z-index из ответа не нужен.

[WapSter]

Ankhena, этот z-index был до меня)

[Ankhena]

WapSter, действительно. Привыкла, что свойства пишут в определенном порядке и в исходнике не заметила z-index

[olya_097]

Ankhena, почти то что нужно
но не совсем
я бэграунд специально убрала чтобы стало видно

текст из дата атрибута не становится по центру блока .order__wrapper

https://jsfiddle.net/wcrt72de/

[Ankhena]

olya_097, всё у вас перекрывает https://jsfiddle.net/1nzos4d6/

[olya_097]

Ankhena, понимаю

я имею ввиду, что текст из дата атрибута не становится по центру блока .order__wrapper

https://jsfiddle.net/wcrt72de/

[Ankhena]

olya_097, Оля, текст по центру ставится свойством text-align: center, неприлично даже как-то. Ну либо флексами, если вертикаль тоже нужна.

[Ankhena]

olya_097,

display: flex;
  align-items: center;
  justify-content: center;

[olya_097]

Ankhena, это я понимаю
как выравнивать
но все-равно не то

[olya_097]

Ankhena,

[Ankhena]

olya_097, Оль, что вы творите? В смысле всю задачу озвучьте.

[olya_097]

Ankhena, вот
нажимаю на заказать на сейчас

теперь возле текста время переезда
повляется вместо двух селектов текст в псевдо
получается я поставила, как мне нужно с помощью падддингов
Но это тут нормально?
htmlpreview.github.io/?https://github.com/romanenk...

[olya_097]

Ankhena,

[Ankhena]

olya_097, я бы просто блоки бы поменяла на js и дело с концом. Все равно кнопку на js обрабатываете.

По дороге перенесла бы выбор даты и времени на одну строчку.
Выглядит странно, что время объединено с грузчиками, а дата сама по себе.
И потом всю строку в которой дата и время, заменяла на "сейчас", если не хочется, чтобы форма дергалась.

Answer 1

[WapSter]

Comments

[olya_097]

WapSter, перекрывать нужно
ведь текст какой то текст отображается

[WapSter]

olya_097, обновил

[olya_097]

WapSter, вот ожидаемый результат

[olya_097]

WapSter, но именно нужно с такой разметкой

<div class="order__wrapper active" data-time="а этот текст должен перекрывать">какой то текст</div>

[WapSter]

olya_097, сделал

[olya_097]

WapSter, почти то что нужно
но не совсем
я бэграундд специально убрала чтобы стало видно

текст из дата атрибута не становится по центру блока .order__wrapper

https://jsfiddle.net/wcrt72de/

[WapSter]

olya_097, без бг не выйдет либо задавать для active размер шрифта равный 0, но тогда высотой нужно будет в ручную управлять.