CSS — тень поверх изображения?

Question

[Moe Green]

Приветствую!

Требуется подсказка. Задача - "накинуть" тень поверх изображения. Пробую "играться" c position: relative и z-index.

Сделал слоеный пирог:

- nav на первом уровне
- img - на втором уровне
- a - на третьем (самом высоком) уровне.

По идее - все должно работать, но не работает. Нету тени - все!
А должна же быть! По идее, раз блок a расположен на самом верху, то он должен "класть" все свое на нижестоящих. )

Пример кода - codepen.io/gearmobile/pen/OVyJba

Answer 1

[Тимофей Белоусов]

Как-то так.

Comments

[al3ch5]

А зачем вообще нужно такая штука!!! Где используется?

[Moe Green]

al3ch5: вот такая фиговина - take.ms/KlAWl

[Moe Green]

SelenIT2: мдя... .thumbs "подняли" над body; .block тоже начал "плавать" через position: relative (чтобы под него "подсунуть" можно было что-то), но так как z-index не указали, то остался там, где и был; .block__image "подсунули" под .block. тогда два вопроса. почему IE8 не может "разобраться" в этом? и почему тогда моя более упорядоченная фигня не работает? (

[Moe Green]

SelenIT2: а так - нравиться )) не надо костыли через псевдоэлементы городить

[Moe Green]

SelenIT2: кстати, пробовал прояснить для себя картину с помощью 3D в инспекторе Firefox. Я правильно понял, что в этом случае не отображается реальная картина? то есть, если по html-коду один элемент находится над другим, 3D-инспектор его так и показывает; а вот, какой элемент под какой "подсунут", 3D-инспектор этого не показывает - то есть, врет? по крайней мере, у меня так получилось.

[Moe Green]

"подсунут" - имеется ввиду через position и z-index.

[Moe Green]

SelenIT2: отлично, разобрались. спасибо!

Answer 2

[Саша]

Например

Comments

[Moe Green]

угу. только для .th - vertical-align: top; - лишнее? а так - ок.

[Саша]

Valery Semenencko: Не лишнее.
На все инлайн-блочные элементы лучше задавать выравнивание, если этого не делать могут полезть баги в каком нибудь старом ИЕ или еще где.

[Moe Green]

userAlexander: ок - надо запомнить )

[Саша]

Valery Semenencko: Но в целом нужно тестировать + использовать обнуление стилей.