Как расположить after под прозрачным блоком?

Question

[Ragtime Kitty]

Привет.

Есть блок, его after находится под ним: z-index: -1;
Если задать блоку прозрачность меньше 1, то after будет отображаться поверх самого блока.

Контекст наложения, там, тыры пыры, я его не очень понимаю.

Собственно, вопрос: Как сделать прозрачным блок и расположить after под ним?

Comments

[Виталий Киренков]

Вам обязательно нужно, чтобы весь блок имел прозрачность? Или можно ограничиться фоном?

[Rustam Bainazarov]

Оно?



Только мне кажется, вы хотите сделать простое действие очень окольным путём.

[Ragtime Kitty]

Виталий Киренков, весь хотелось бы, там внутри много элементов, и надо весь блок спрятать.

[Ragtime Kitty]

Рустам Байназаров, увы, не оно. Я понимаю, что это далеко не самый очевидный способ и вариант на нескольких дивах я давно сделала, но вот хочется через псевдо это как-то слепить.

[Rustam Bainazarov]

Ragtime_Kitty, тогда я не понял, что вам нужно. Покажите пример визуально верный.

[Ragtime Kitty]

Рустам Байназаров,

Нужно чтобы при установке прозрачности диву, его афтер находился на уровень ниже самого дива.
Чтобы выглядели они как тут: https://jsfiddle.net/8wz5cdrt/
UPD. Упс, корректнее будет вот так: https://jsfiddle.net/4qmy6dxt/

[Rustam Bainazarov]

Ragtime_Kitty, таки я всё равно ничего не понял :))

P. S. Нейминг классов несколько безумный.

[Ankhena]

Ragtime_Kitty, так https://jsfiddle.net/1gv9Ltf4/ ?

[Ragtime Kitty]

Ankhena, ага, только надо это сделать с помощью одного дива

[Ragtime Kitty]

Рустам Байназаров, классы просто для наглядности.

Вот так я хочу чтобы это выглядело:

А вот как это выглядит, если задать прозрачность:

[Rustam Bainazarov]

Ragtime_Kitty, т. е. вы хотите менять z-index, если у вас прозрачность меньше единицы? У вас на картинке :after то под блоком, то над ним.

Вам не к CSS тогда, если хотите автоматики, ибо в нём нет условной логики как таковой.

Так что только вручную ставить нужный z-index псевдоэлементу. Или писать скрипт, который будет искать в нужных элементах свойство opacity, проверять, меньше ли оно единицы, а если меньше, выставить класс, который будет менять z-index псевдоэлементу.

[Ragtime Kitty]

Рустам Байназаров, да ну нет же, не условие.

Афтер всегда под дивом (картинка №1), на картинках просто крутится камера.
Но если диву задать прозрачность меньше единицы, то афтер окажется над дивом, несмотря на z-index: -1 (картинка №2);

В общем, проехали, решение уже подсказали ♥

[Rustam Bainazarov]

Ragtime_Kitty, а-а-а, я наконец понял, что вам нужно, тогда решение знаю, но если уже подсказали, то это хорошо.

Answer 1

[Антон Усачев]

Никак, потому что псевдоэлементы принадлежат блоку.
Обход такой. Если нужно дать какой-то фон, дать его для :after с z-index: 1.
Для :before – z-index по умолчанию (он будет под :after).
Таким образом имитируем что-то под фоном блока.
Для контента блока z-index: 2 (если там будет контент).,
Ну и не забываем играть с position, чтобы все это расставить по местам.

Comments

[Ragtime Kitty]

Спасибо, именно то, что нужно.