Log in / Register

Forum › Bugs

Pseudoclass z-index

ehzhang
Hello again!

Sorry to bug with all the topics! I noticed while working that while z-index is generally supported, the z-index behavior is not as expected when working with pseudoclasses.

In the sample case below, the blue square produced by the pseudoclass should stack below the main
element, but does not.

Sample Code:
https://gist.github.com/ehzhang/df0b68b4cc8d962b6f4beca5ba7a5303

Thanks!
  1. Screen Shot 2017-04-25 at 10.08.14 AM.png‎ 53.9 kB ‎
    Prince Render
  2. Screen Shot 2017-04-25 at 10.08.41 AM.png‎ 14.1 kB ‎
    Expected Render
mikeday
Thank you we will investigate this issue.
mikeday
This appears to be caused by a stacking bug where absolutely positioned boxes can be displayed on top of boxes they shouldn't be. We hope to fix this issue in the future.
joelmeador
+1 for fixing the absolute positioned bug.
zdenko
Has this bug been fixed?

Stacking order for inline-block elements still seems to be creating its own stacking context, thus the z-index in the ::after is 'ignored' or relevant to the stacking context that inline-block seems to create.

This does not work:
<html>
<head>
    <style>
        * {
            box-sizing: border-box;
        }
        .item {
            display: inline-block;
            width: 20px;
            height: 20px;
            position: relative;
            background: red;
        }
        .item::before {
            content: '';
            position: absolute;
            top: 10px;
            left: 10px;
            width: 20px;
            height: 20px;
            background: blue;
            z-index: -1;
        }
    </style>
</head>
<body>
<div class="item"></div>
</body>
</html>


This works:
<html>
<head>
    <style>
        * {
            box-sizing: border-box;
        }
        .item {
            display: block;
            width: 20px;
            height: 20px;
            position: relative;
            background: red;
        }
        .item::before {
            content: '';
            position: absolute;
            top: 10px;
            left: 10px;
            width: 20px;
            height: 20px;
            background: blue;
            z-index: -1;
        }
    </style>
</head>
<body>
<div class="item"></div>
</body>
</html>


The only inline-* display that I found to be working without creating it's own stacking context is table-cell, but that cannot be nested inside a table as it will be treated as nested table with one cell and will add borders on this 'table'. To get around that , you can wrap it inside a html element with display: table or inline-table but then you loose the inline-element behaviour and is treated as a block element.

Edited by zdenko

mikeday
We have not fixed this issue yet, but it remains on the roadmap and we will get to it as soon as time permits. :)
zdenko
Hi,

that's ok. I'll be watching the Roadmap then for updates :)