Почему блок с outline не слушается z-index?

Question

[Дмитрий]

Всем привет! Столкнулся с такой проблемой:

В общем то outline никак не хочет уходить под правый блок, z-index не работает. Какие решения посоветуете?
https://jsfiddle.net/fvn3p8Le/

Comments

[Дмитрий]

https://jsfiddle.net/fvn3p8Le/

[Дмитрий]

Можно конечно абсолютом закинуть, но хотелось бы понять, почему аутлайн такой настырный

[Hyubert]

Дмитрйи,

position: relative;
z-index: -1;

[Дмитрий]

Hyubert, и ведь действительно :D Спасибо!

[Hyubert]

Дмитрйи, не за что

[SelenIT3]

The stacking of the rendering of these outlines is explicitly left up to implementations to provide a better user experience per platform.

Наложение отображения этих outline явным образом оставлено на усмотрение разработчиков реализаций,
чтобы обеспечить большее удобство пользования для каждой платформы.

С учетом вышесказанного в спецификации, посоветую делать статичную рамку бордером или (на крайняк) фоном. Outline всё-таки именно для динамического выделения, при фокусе и т.п.

Answer 1

[ned4ded]

z-index работает только с абсолютной и относительной позиционкой.

https://jsfiddle.net/ned4ded/cbn4dts3/