Почему вложенные окна не работают над изображениями?

Ответ 1

Поскольку тень является частью родительского контейнера, она отображается ниже изображения. Один из вариантов состоит в том, чтобы иметь div, который помещает тень поверх изображения следующим образом:

<main>
    <img src="https://upload.wikimedia.org/wikipedia/commons/d/d2/Solid_white.png" />
    <div class="shadow"></div>
</main>

CSS:

.shadow {
    position: absolute;
    width: 100%;
    height: 100%;
    box-shadow: inset 3px 3px 10px 0 #000000;
    border-radius: 20px;
    top: 0;
    left: 0;
}

Изменить: Я обновил скрипт, чтобы включить радиус границы в тени и на img, который решает проблему, указанную в комментариях.

https://jsfiddle.net/WymFE/3/

Ответ 2

Просто, чтобы прослушивать это, потому что я просто создавал нечто подобное...

Я ненавижу загрязнять мою разметку дополнительными элементами для стилизации, поэтому решение CSS должно использовать: после псевдоэлемента:

main::after
{
 box-shadow: inset 3px 3px 10px 0 #000000;
 content: '';
 display: block;
 height: 100%;
 position: absolute;
 top: 0;
 width: 100%;
}

Возможно, слишком поздно для того, что вы пытались сделать, но это лучшее решение в моей оценке.

Ответ 3

Причина, по которой он не перекрывается, заключается в том, что изображение находится внутри div, поэтому изображение находится поверх него. Изображение выше (ближе к пользователю), чем div.

Вы можете изменить изображение, чтобы использовать position: relative; z-index: -1, и иметь содержащий div div, вместо того, чтобы устанавливать цвет фона на теле. Вам нужно будет использовать box-sizing: border-box, чтобы включить границу в ширину div.

DEMO

body {
    background-color: #FFF;
}

main {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    border: 60px solid black;
    box-shadow: inset 3px 3px 10px 0 #000000;
    box-sizing: border-box;
}

img {
    z-index:-1;
    position: relative;
}

Ответ 4

Вы можете установить изображение в качестве фона div вместо:

background-image:url(http://www.placehold.it/500x500)

Пример jsFiddle

Ответ 5

Одно простое исправление, если вы умны с десятичными знаками, заключается в том, чтобы сохранить ваш контент в отдельном div, который затем выбирает и реализует определенное количество пикселей сверху.

Например, пусть ваш заголовок имеет высоту 50 пикселей. Вы можете начать свой #content div id 53.45px сверху (или любой другой теневой тень), а затем ваша тень появится над изображениями.

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

На практике код будет выглядеть следующим образом:

HTML:

  <header>
Whatever in your header
</header>

<div id="content>
Page content
</div>

CSS

header {
    height: 50px;
    box-shadow: 0 5px 5px rgba(0,0,0,1);
}

#content {
    top: 55px;
}

Ответ 6

Как упоминал Рилус, мы могли бы использовать псевдокласс. К сожалению, по какой-то причине это не похоже на тег img, но мы можем использовать комбинацию внутренних и внешних контейнеров для достижения необходимого нам эффекта.

.outer:hover .inner:after {
position: absolute;
content: '';
color: white;
display:block;
bottom: -0px;
right: -0px;
width: 100%;
height: 100%;
z-index: 11;
border: solid 10px red;
}

http://jsbin.com/kabiwidego/1/

не уверен в том, что 10, хотя, как кажется, обрабатывает псевдоклассы, которые абсолютно по-разному позиционируются в большинстве браузеров.

Ответ 7

Для тех, кто использует абсолютные позиционные, полноразмерные: перед /: после псевдоэлементов, рассмотрите возможность использования pointer-events: none в псевдоэлемент, поэтому исходные элементы остаются интерактивными.