z-index 사용법에 대해 당신이 모르는 것

오늘의 콘텐츠를 시작하기 전에 다음 코드를 살펴보겠습니다.

<style type="text/css"><br />   #div1,#div2{<br />       width:200px;<br />       height:200px;<br />       background-color:red;<br />       position: relative;<br />       z-index:1;<br />   }<br />    #div2{<br />        background-color:green;<br />        z-index:0;<br />    }<br />    #div1_1,#div2_1{<br />        width:100px;<br />        height:100px;<br />        background-color:black;<br />    }<br />    #div1_1{<br />        position:relative;<br />        z-index:-100;<br />        left:80px;<br />        top:140px;<br />    }<br />   #div2_1{<br />       background-color:yellow;<br />       z-index:999;<br />       position: relative;<br />       left:160px;<br />       top:-50px;<br />   }<br /><br /></style>

<br><div id="div1">
<br>    我是div1<br>    <div id="div1_1">
<br>        我是div1_1<br>    </div>
<br>
</div><br><div id="div2">
<br>    我是div2<br>    <div id="div2_1">
<br>        我是div2_1<br>    </div>
<br>
</div><br>

'

???실례합니다. div2_1의 z-index 값이 999인 이유는 왜 여전히 div1의 요소 수준보다 낮습니까? div1_1의 z-index 값이 -100인데 그래도 div1보다 높다고요? 당황하지 말고 천천히 내 말을 들어보세요.

우선, 어떤 것이 낯설 때 먼저 세 가지를 이해해야 합니다. 1. 이것은 무엇입니까? 2. 용도는 무엇입니까? 3. 사용 방법은 무엇입니까?

다음 세 단계에 따라 Z-색인 속성을 설명하겠습니다. 우선 첫째, 둘째, 이게 뭐죠? Z-index는 실제로 CSS의 일반적인 속성입니다. 직설적으로 말하면 웹페이지에 세 개의 div가 겹쳐서 아래에서 위로 표시되어야 하는 경우 주로 사용됩니다. 특정 순서, 어떻게 해야 합니까? 예, 일반적인 웹 개발에서는 2차원적이며 CSS는 더 나은 레이아웃을 돕기 위해 이 속성을 도입합니다.

두 번째로, 이 기능을 사용하는 방법에 대해 먼저 몇 가지 개념을 소개하겠습니다.

1. z-index 속성은 요소의 스택 순서를 설정합니다. 스택 순서가 높은 요소는 항상 스택 순서가 낮은 요소 앞에 옵니다.

2. 형제 요소의 경우 기본적으로 또는 position:STATIC의 경우 문서 흐름 뒤쪽의 요소가 이전

을 덮어씁니다.

3. 동일한 레벨의 요소의 경우, 위치가 정적이 아니고 z-index가 존재하는 경우 z-index가 큰 요소가 z-index가 작은 요소를 덮고 z-index가 클수록 z-index가 커집니다. , 우선순위가 높을수록

4. ie6/7에서는 위치가 정적이지 않고 z-index가 존재하지 않으므로 z-index가 0입니다. 다른 브라우저에서는 z-index가 auto입니다.

5. z-index가 auto인 요소는 계층관계 비교에 참여하지 않습니다. 상향 순회부터 이 지점까지 z-index가 auto가 아닌 요소는 비교에 참여합니다

참고: position:static을 설정하고 position을 설정하지 않으면 요소는 동일하며 스태킹 수준에 영향을 주지 않습니다(다음 예에서는 이에 대해 더 이상 설명하지 않으며 후속 위치는 다음과 같이 정적이 아닙니다). 기본값)

몇 가지 예를 들어 설명하겠습니다.

1. Z-인덱스와 위치가 없는 요소의 스택 순서:

위 두 div의 stacking 규칙은 뒤쪽의 stacking 수준이 앞쪽보다 높다는 것입니다. 즉, 음의 여백을 사용하여 div2를 div1로 이동하면 겹치는 부분이 대신 div2로 표시됩니다. div1의 그러면 어떤 학생들은 이때 div2 뒤에 div3을 추가하면 어떻게 됩니까? 뒤에 div가 몇 개 있어도 레벨은 div2와 같을 것이고 div2보다 높지는 않을 것입니다

2. 위치는 관련되어 있지만 Z-index는 관련되지 않은 경우

예:

<style type="text/css"><br />    /*定位规则,如果加position堆叠顺序优先，所以A此时变在B上面*/<br />    #a,#b{<br />        width:100px;<br />        height:100px;<br />        background-color:red;<br />    }<br />    #b{<br />        background-color:green;<br />        margin-top:-20px;<br />        margin-left:20px;<br />    }<br />    #a{<br />        position:relative;<br />    }<br /><br /></style>

<br><div id="a">
<br>    我是A<br>
</div><br><div id="b">
<br>    我是B<br>
</div><br><br>然后你看到的是这样的情况：

这说明啥呢，虽然b元素在a的后面，但是a加了position之后，他的堆叠层级就变高了，跑到了b的上面<br>，所以我们利用这个规则在无z-index参与的情况下也可以实现三层堆叠，比如这样：

 <style type="text/css"><br />        /*定位规则,在没有z-index干扰的情况下也可以三个div也可以做出堆叠效果哦*/<br />        #a,#b{<br />            width:100px;<br />            height:100px;<br />            background-color:red;<br />        }<br />        #b{<br />            background-color:green;<br />            margin-top:-20px;<br />            margin-left:20px;<br />        }<br />        #a_1{<br />            width:50px;<br />            height:50px;<br />            background-color:blue;<br />            position:relative;<br />            left:80px;<br />            top:50px;<br />        }<br /><br />    </style><br><br><br><div id="a">
<br>    我是A<br>    <div id="a_1">
<br>        我是A的子DIV<br>    </div>
<br>
</div><br><div id="b">
<br>    我是B<br>
</div><br>

3.有z-index参与的情况：<br>1.简单的堆叠：<br>#div1{<br>position:relative;<br>z-index:1;<br>}

#div2{<br>position:relative;<br><br>}

#div1{<br>position:relative;<br>z-index:0;<br>}

<div id="div1"></div><br><div id="div2">/div><br><div id="div3"></div>
<br>此时的层级顺序是，div1在最顶层，div2和div3均在第二层也就是最后一层。需要大家注意的一点，在position有值时，设置z-index为0和不设z-index是一样的。<br><br>2.相对复杂的堆叠（z-index的从父原则）：<br>   意思就是子元素首先要看看父元素有无z-index，就像最开始的例子，当两个父元素div1的z-index为1,div2的z-index为0时，div1的所有的子元素及自己的层级就会比div2及其子元素高，这也解释了为什么div2_1的z-index值设为999了都还是在div1的下面。讲到这，上述例子还有一个问题，div1_1我都设了z-index为-100了，为什么还是比div1高呢。有些同学会想，我就是想让背景黑色div1_1在父元素div1的下边怎么办呢，所以这里还有一个原则：当父元素有设置z-index时，那么他的子元素的层级一定会比他高，所以如果你想让一个子元素的层级在父元素之下，你一直设置子元素的z-index，都设置成了z-index 1000了都，没有效果，那么不妨看看父元素是否也被设置了z-index吧！
<p> 마지막으로 강조할 점은 z-index는 음수일 수 있다는 것입니다. 둘째, z-index의 값은 px가 없는 정수여야 합니다. z-index는 px이어야 합니다. 둘째, z-index를 사용할 때는 position 값이 고정되어 있는지, 절대적인지, 상대적인지에 상관없이 값이 정적인 수준에서는 동일합니다. 위치가 없는 레벨이 설정됩니다. </p>
<p> 정리하자면, 위 예시는 매우 지저분해 보이고 실제 상황에서 어떻게 활용해야 할지 잘 모르겠습니다. 개인적인 경험으로 우선 직위가 있는지 살펴보고, 직위가 없으면 계층구조를 순서대로 살펴보세요. position이 있으면 z-index가 있는지 확인하고, 상위 요소의 하위 요소에 대한 z-index 값을 설정할 때는 상위 요소에 z-index가 설정되어 있는지 주의해야 합니다. 부모 요소는 자식 요소의 수준에 영향을 미칩니다. 이 점은 매우 중요하며 우리가 저지르는 가장 일반적인 실수이기도 합니다. 요소의 z-index 값을 최대 또는 최소로 설정할 때 작동하지 않으면 z-index의 상위 원칙을 완전히 이해하지 못한 것인지 확인하는 것이 좋습니다. 본 글과 관련없는 내용에 대해 이야기해보겠습니다. CSS 스타일은 모두 상속 가능합니다. CSS 상속에 대해 천천히 알아보는 시간을 갖는 것이 좋습니다. </p>
<p> </p>
<p> </p>
<pre class="brush:php;toolbar:false"><br><br>