Search code examples
cssz-indexoverlap

CSS Z-index not overlapping

So I was trying to customize a website with CSS but I cannot overlap this image under this element. The code:

body#bodyDefault > form > div > table > tbody::after {
    pointer-events: none;
    content:' ';
    position: absolute;
    right: 0;
    top: 0;
    z-index: 20;
    background-image: url('');
    height: 200px;
    width: 200px;
    background-size: 200px;
}
body#bodyDefault > form > div > table > tbody > tr:nth-child(2) {
    z-index: 50;
}

I am trying to cut the excessive part of the image by hiding it under the tr element.

Solution

  • Use position: absolute/relative; to body#bodyDefault > form > div > table > tbody > tr:nth-child(2)

    why?

    z-index does not work without position: absolute/relative;

    For example:

    body#bodyDefault > form > div > table > tbody > tr:nth-child(2) {
    z-index: 50;
    position: absolute;// or relative
}