Как пофиксить подсветку?

Question

[Dvorak]

codepen.io/anon/pen/VazPqB

При наведении на левый блок не подсвечивается нормально правая часть блока. Как исправить?

Answer 1

[Elwen]

Добавьте
#green { position: relative;}

Comments

[Dvorak]

спасибо!

[Elwen]

Михаил Макарычев: И дружеский совет: не используйте одинаковые id на странице, лучше использовать для этого классы.

[theWaR_13]

Elwen не могли бы Вы объяснить, почему это сработало?

[Elwen]

theWaR_13: Все дело в позиционировании относительно "близости" к экрану.
По умолчанию, элементы расположенные в коде ниже отображаются выше (ближе). Для наглядности - https://jsfiddle.net/ty038y65/ . Поэтому правый блок перекрывает тень от левого.
Что бы этого избежать надо приподнять нужный блок. Для этого Михаил Макарычев верно указал z-index для #green:hover. Но z-index применится только к элементам, у которых строго задано позиционирование relative, absolute или fixed.

Теоретически, можно было обойтись без z-index, и указать только #green:hover{position:relative}. Это само по себе вытолкнет блок над всеми элементами, у которых позиционирование строго не задано.

[theWaR_13]

Elwen: ок, спасибо за ответ.