Search code examples
csscss-positionz-indexabsolute

Css: position and z-index ignored and warning shown

I am building a card, click to flip it. but the user will be unable to select the content, I do not want to mess with document.onselectionchange, therefore I added a copy button to every card at the top right corner.

however, in this css layout, I can never click the button. I inspected the elements, find that some properties on .copiable .widget has issue compiling, specifically:

position: absolute;
z-index: 200000;
padding: 0;
transition: all 0.3s ease;

there is always an exclainmation mark besides it and I cannot see any helpful warning.

/* card */
.card-wrapper{
    /*
    front: .card-wrapper.card-sides
    back: .card-sides.card-back
    */
    background-color: var(--card-front);
    box-shadow: 5px 5px 15px var(--card-shadow);
    margin: auto;
    margin-top: 30px;
    margin-bottom: 30px;
    border-radius: 20px;
    transition: box-shadow 200ms ease-in, transform 400ms ease-in;
    background: lightgrey;
}

.card-sides{
    width: 500px;
    height: 300px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* cannot set overflow to auto or hidden
    it will hide before or after pseudo-elements */
    color: var(--card-color);
}

.card-wrapper .card-back{
    background-color: var(--card-back);
    color: var(--card-color);
}

.card-wrapper .card-text{
    padding: 15px;
    height: calc(100% - 15px);
    width: calc(100% - 15px);
    font-size: 40px;
    font-family: Georgia;
    white-space: wrap;
    overflow: auto;
}

.card-wrapper .card-text,
.card-wrapper .card-text > p,
.card-wrapper .card-text > p > p{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.card-sides.card-on-front{
    background-color: var(--card-back);
    color: var(--card-color);
}

/* copy */
.copiable{
    position: relative;
    z-index: 2000;
}

.copiable .widget{
    z-index: 200000;
    text-indent: 0;
    /* end of unsetters */
    position: absolute;
    /* right: 18px; */
    top: 10px;
    content: "double click to selection";
    padding: 0;
    width: auto;
    height: auto;
    position: absolute;
    font-size: 12px;
    color: #333;
    line-height: 20px;
    overflow: hidden;
    backface-visibility: hidden;
    transition: all 0.3s ease;
    cursor: pointer;
    z-index: 10;
    background: #fff;
    transition: all 400ms ease-in;
    padding: 5px;
    border-radius: 5px;
    font-weight: bold;
    display: none;
}

.widget:hover{
    opacity: 0.75;
}
<div class="card-wrapper card-sides copiable" style="transform: scale(1, 1);">
    <div class="widget copy" style="right: 10px; display: block;">copy</div>
    <div class="cyber-block-wrapper"
        style="position: absolute; width: 100%; height: 100%; overflow: hidden; z-index: 20000;">
    </div>
    <div class="card-text md-auto-format" style="opacity: 1;">
        <p>
        <p><strong>bold</strong>&nbsp;
            <ins>underline</ins>&nbsp;
            <del>deleted</del> &nbsp;
        </p >
        </p >
    </div>
</div>

I will be more than glad if you can give me a hand.

Solution

  • Your cyber-block-wrapper div covers the entire card and it's in front of your copy button, so it's blocking the clicks (and the hover). If you don't want that to happen you could set pointer-events: none on cyber-block-wrapper.