Steps to reproduce
This problem is illustrated here: https://codepen.io/anon/pen/MvXOJj
The expected behavior of the pen is best illustrated on any browser other than IE/Edge (e.g. Chrome, Safari, Firefox, Opera, Yandex). Namely the light grey element should be animated in from of the red content and behind the dark grey content.
The light grey and dark grey elements are siblings of a common parent. The common parent has a z-index of 5, which places it above the red element and establishes a new stacking context. The light-grey element has position absolute which implicitly raises the stacking order above other elements. To counter this, a z-index of -1 is applied.
What should happen is that the z-index:-1 should place it below its sibling, but the parent’s stacking order should keep it above the red element. In IE/Edge, the light grey element is incorrectly placed below the red element.
And WOW! Is the re-CAPTCHA on this page is annoying.
Comments and activity
- Microsoft Edge Team
Changed Assigned To to “James M.”
Changed Assigned To to “firstname.lastname@example.org”
Changed Assigned To from “email@example.com” to “Christian F.”
Changed Assigned To to “wptrentri”
Changed Title from “Relative Z-index incorrectly calculated” to “Relative Z-index incorrectly calculated”
Changed Assigned To from “wptrentri” to “Bogdan B.”
Changed Status to “Fixed”
Thank you for the report. We’ve recently fix an underlying problem in our development branch and the fix should be available in WIP builds in the next few weeks.