Kevin Powell - Community•2mo ago

zindex not workig as i want

<!DOCTYPE html>
<html lang="en">
<head></head>
    <style>
        button{
            background-color: red;
            position: absolute;
            z-index: 2;
            color: hotpink;
        }
        button::before{
            content: '';
            position: absolute;
            inset: -5px;
            background-color: black;
            padding: ;
            z-index: -10000;
        }
    </style>
</head>
<body>
    <button>
        fewefwdqhtr
    </button>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head></head>
    <style>
        button{
            background-color: red;
            position: absolute;
            z-index: 2;
            color: hotpink;
        }
        button::before{
            content: '';
            position: absolute;
            inset: -5px;
            background-color: black;
            padding: ;
            z-index: -10000;
        }
    </style>
</head>
<body>
    <button>
        fewefwdqhtr
    </button>
</body>
</html>

hi i want to make it so the the after or before goes behid the button completly i dont know how but i only managed to bring the text up front

4 Replies

Chris Bolson•2mo ago

Remove the z-index on the button itself. By adding a z-index on the parent element you are creating a new stacking context which means that it's children won't be able to go behind it.

R.I.POP•2mo ago

intresting but what if i want the button got all the way back ? without z index i cant touch it and it stays infront :/ and with z index before after is completly useless

Chris Bolson•2mo ago

You could wrap the button in another container that has the z-index. Alternatively, assuming that the issue here is the background color on the button, you could apply that to another pseudo element ::after.

button {
  position: absolute;
  z-index: 2;
  color: hotpink;
}
button::before,
button::after{
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background-color: red;
}
button::before {
  inset: -5px;
  background-color: black;
}

button {
  position: absolute;
  z-index: 2;
  color: hotpink;
}
button::before,
button::after{
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background-color: red;
}
button::before {
  inset: -5px;
  background-color: black;
}

I don't fully understand what you are trying to achieve so I am sorry if I am missing something.

R.I.POP•2mo ago

its perfect tnx a lot

Gaming

Programming

zindex not workig as i want