>

z-index -2의 a- 요소와 z-index -1의 div 요소가 있습니다. z-index가 높기 때문에 div 요소가 맨 위에있을 것으로 예상합니다. Chrome에서는 그렇지 않습니다. Chrome의 버그입니까?

편집 : 수정 방법에 대한 제안을 보내지 마십시오. 왜 다르게 보이는지 알고 싶습니다.

#bar
{
    position:fixed;
    top:0;
    right:0;
    left:0;
    height:100px;
    z-index:-2;
    background:rgba(255,0,0,0.5);
}
#square
{
    position:relative;
    height:150px;
    width:150px;
    z-index:-1;
    background:black;
    margin:200px auto 10000px auto;
}

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body onload="document.getElementById('bar').click()">
        <a id="bar" href="#square">scroll down</a>
        <div id="square"></div>
    </body>
</html>

스크린 샷

  • 답변 # 1

    솔직히 말해서 왜 이런 일이 일어나고 있는지 확실하지 않지만, 긍정적 인 값을 사용하면 모든 것이 예상대로 작동합니다.

    #bar
    {
        position:fixed;
        top:0;
        right:0;
        left:0;
        height:100px;
        z-index:1;
        background:rgba(255,0,0,0.5);
    }
    #square
    {
        position:relative;
        height:150px;
        width:150px;
        z-index:2;
        background:black;
        margin:200px auto 10000px auto;
    }
    
    

    <!DOCTYPE html>
    <html>
        <head>
        </head>
        <body onload="document.getElementById('bar').click()">
            <a id="bar" href="#square">scroll down</a>
            <div id="square"></div>
        </body>
    </html>
    
    

  • 답변 # 2

    다른 요소보다 우선 순위가 높은 고정 위치 요소에 문제가 있습니다. 자세한 내용은 스택 컨텍스트를 참조하십시오

    다음은 문제를 해결하기위한 다른 접근 방식의 jsfiddle 링크입니다.

    #bar
    {
        position:sticky;
        top:0;
        right:0;
        left:0;
        display: inline-block;
        width: 100vw;
        height:100px;
        z-index:-2;
        background:rgba(255,0,0,0.5);
    }
    #square
    {
        position:relative;
        height:150px;
        width:150px;
        z-index:-1;
        background:black;
        margin: 0px auto;
    }
    
    

관련 자료

  • 이전 python - 다른 폴더의 여러 CSV 파일에서 선택한 열을 단일 CSV 파일로 결합
  • 다음 c - 부동 소수점 값 변환