-2

I have simply following html + css code:

Someone knows why div with button is still hidden? I added z-index

function myFunction() {
  console.log('Clicked')
}
div{
  color: yellow;
  position: relative;
  z-index: 1000;
}

div:after{
  content: '';
  background: red;
  padding: 100px;
  position: absolute;
  left: 0;
  z-index: 999;
}
<div>
<button onclick="myFunction()">Click me</button>
</div>
Jackie
  • 39
  • 5
  • 1
    You added the `z-index` to an `after` pseudo-element, which was already positioned "over" your button. – DBS Jun 13 '22 at 08:49
  • Does this answer your question? [Is it possible to set the stacking order of pseudo-elements below their parent element?](https://stackoverflow.com/questions/3032856/is-it-possible-to-set-the-stacking-order-of-pseudo-elements-below-their-parent-e) – Cédric Jun 13 '22 at 08:51
  • Stop using inline `on*` handlers: Use https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener – Roko C. Buljan Jun 13 '22 at 08:51

4 Answers4

1

Instead of giving the z-index to your div (which :after is still a part of, and therefore positioned over your div) give it to the button:

function myFunction() {
  console.log('Clicked')
}
div button{
  color: yellow;
  position: relative;
  z-index: 1000;
}

div:after{
  content: '';
  background: red;
  padding: 100px;
  position: absolute;
  left: 0;
  z-index: 999;
}
<div>
<button onclick="myFunction()">Click me</button>
</div>

Generally speaking, you should probably not style your :after and your div with two seperate z-index. Rather Create a new div an style them seperately.

function myFunction() {
  console.log('Clicked')
}
div{
  background: red;
  padding: 100px;
  position: absolute;
  left: 0;
  z-index: 999;
}
<div>
<button onclick="myFunction()">Click me</button>
<p>Test</p>
<p>Test</p>
</div>
G43beli
  • 3,835
  • 4
  • 21
  • 28
  • Okey but button is just an example, I can have there different tags. So I would like to set z-index for every children in my div? – Jackie Jun 13 '22 at 08:50
  • the question is, why do you want to style the div's :after pseudo element? Is there a specific reason? You could also just create a wrapper div (see my updated answer) @Jackie – G43beli Jun 13 '22 at 08:55
  • Yes it is just an example. Could look on this codesandbox - https://codesandbox.io/s/colorful-tooltip-antd-4-21-0-forked-dctrww?file=/Tooltip.js - and tell me why I can not click on this button? I know this is because od padding, but how can I solve it? – Jackie Jun 13 '22 at 08:56
0

Your :after element is in front of the button.

Try position: relative and z-index: 1 on the button and z-index: 0 on the :after element.

Sjors
  • 1,205
  • 1
  • 8
  • 24
  • Ok it works but it is just an example. Could look on this codesandbox - https://codesandbox.io/s/colorful-tooltip-antd-4-21-0-forked-dctrww?file=/Tooltip.js - and tell me why I can not click on this button? I know this is because od padding, but how can I solve it? – Jackie Jun 13 '22 at 09:09
  • That's because the tooltip is over the button. If you use your browser dev-tools and use the inspect element tool, you can see what happens. You can set the z-index on the button to 1 and the z-index on the tooltip to 0 to fix this. Another solution is to use `pointer-events: none` on the tooltip, but that would make the tooltip unclickable. – Sjors Jun 13 '22 at 09:16
  • Can I set z-index on children because there might be not button? – Jackie Jun 13 '22 at 09:44
  • pointer-events: none - that sounds good - I do not see any situation when I might need to click on tooltip. Do you see purpose click on tooltip when it disappear after mouse left from children? @Sjors – Jackie Jun 13 '22 at 09:46
  • I think that's OK in this case, but I would prefer the z-index option since the pointer-events is more like a 'hacky' solution, but it works. I would really recommend to learn how CSS positioning and the z-index value works, because you can really benefit from it and it can prevent a lot of frustration :) Good luck! If this was the answer to your problem, would you mind marking it as the solution? – Sjors Jun 13 '22 at 12:35
  • About your z-index question, you could always use `div > * { z-index: 1 }` to address all direct children inside an element. – Sjors Jun 13 '22 at 12:37
0

For z-index to put div:after element behind its parent, use negative value. It is deflecting from normal behaviour but specs say so https://www.w3.org/TR/CSS21/visuren.html#layers

function myFunction() {
  console.log('Clicked')
}
div{
  color: yellow;
  position: relative;
}

div:after{
  content: '';
  background: red;
  padding: 100px;
  position: absolute;
  left: 0;
  z-index: -1;
}
<div>
<button onclick="myFunction()">Click me</button>
</div>
B Kalra
  • 821
  • 6
  • 17
  • Ok it works but it is just an example. Could look on this codesandbox - https://codesandbox.io/s/colorful-tooltip-antd-4-21-0-forked-dctrww?file=/Tooltip.js - and tell me why I can not click on this button? I know this is because od padding, but how can I solve it? – Jackie Jun 13 '22 at 08:55
0

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div{
  color: rgb(238, 17, 17);
  position: relative;
  z-index: -1;
}

div:after{
  content: '';
  background: red;
  padding: 100px;
  position: absolute;
  left: 0;
  z-index: -1;
}
  </style>
</head>
<body>
  <div>
 
    <button type="button" onclick="myFunction()">Click Me!</button>
    </div>
    <script>
    function myFunction() {
      console.log('Clicked')
    }
  </script>
</body>
</html>
Rijil
  • 58
  • 10