홈>2020-03-18 16:12

css - Chrome과 Firefox에서 z- 색인을 다르게 렌더링하는 이유는 무엇입니까?

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>

스크린 샷

css

답변 # 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;
}

Python2.net

css - Chrome과 Firefox에서 z- 색인을 다르게 렌더링하는 이유는 무엇입니까?

관련 자료