CSS 계층 관계를 설정하는 방법

CSS에서는 z-index 속성을 사용하여 요소의 스택 순서를 설정할 수 있습니다. 스택 순서가 높은 요소는 구문 형식에서 항상 스택 순서가 낮은 요소 앞에 옵니다. "z-index:numeric;"이면 음수 값이 허용됩니다.

이 튜토리얼의 운영 환경: Windows7 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.

CSS에서는 z-index 속성을 사용하여 레벨을 설정할 수 있습니다.

z-index 속성은 요소의 스택 순서를 설정합니다. 더 높은 스택 순서를 가진 요소는 항상 더 낮은 스택 순서를 가진 요소 앞에 나타납니다. (Z-인덱스는 위치가 지정된 요소에서만 작동합니다).

페이지 레이아웃을 해본 학생들은 Z-색인 속성에 대해 매우 익숙할 것입니다. Z-색인은 웹 페이지 표시를 위한 특수 속성입니다. 모니터에 표시되는 패턴은 2차원 평면이므로 위치 속성을 나타내는 x축과 y축이 있습니다. 디스플레이 소자의 상하층의 중첩 순서 등 입체적인 개념을 표현하기 위해 z축의 차이를 나타내는 z-index 속성을 도입하였다. 중첩 시퀀스에서 요소의 상위 및 하위 3차원 관계를 나타냅니다.

z-index 값이 더 큰 요소는 z-index 값이 더 작은 요소에 겹쳐집니다. 이 속성이 지정되지 않은 위치 지정 개체의 경우 양수 Z-색인 값을 가진 개체는 그 위에 있고 음수 Z-색인 값을 가진 개체는 아래에 있습니다.

간단한 데모

<div style="width:200px;height:200px;"></div>
    <div style="position:relative; top:-50px; width:100px;height:100px;"><div>

두 개의 DIV, 두 번째는 50px 위로 이동합니다. 일반적인 상황은 이렇습니다

두 번째 div가 첫 번째 div를 덮고, 두 번째 div에 z-index 속성을 추가합니다.

<div></div>
    <div><div>
<p> 결과는 다음과 같습니다. z-index의 가장 간단한 적용은 다음과 같습니다</p>
<p><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/024/1d996561d6b4fe03194a5cc37c8b4c04-1.png?x-oss-process=image/resize,p_40" class="lazy" title="CSS 계층 관계를 설정하는 방법" alt="CSS 계층 관계를 설정하는 방법"    style="max-width:90%"  style="max-width:90%" border="0"></p>
<h3 id="위치가-지정된-요소에만-유효합니다">위치가 지정된 요소에만 유효합니다.</h3>
<p>z-index 속성은 위치가 지정된 요소에 적합합니다(위치 속성 값은 상대 또는 절대 또는 고정입니다. 객체)는 디스플레이 화면에 수직인 방향(Z축이라고 함)으로 배치된 요소의 스택 순서를 결정하는 데 사용됩니다. 즉, 요소가 배치되지 않으면 해당 요소에 설정된 z-인덱스가 유효하지 않습니다. </p><pre class='brush:php;toolbar:false;'><div style="width:200px;height:200px;z-index:30"></div>
<div style="position:relative; top:-50px; width:100px;height:100px;z-index:10;"><div>

첫 번째 p의 z-index가 두 번째 p의 z-index보다 크더라도 첫 번째 p의 위치가 지정되지 않고 z-index 속성이 작동하지 않기 때문에 여전히 두 번째 p에 의해 가려집니다.

동일한 z-index를 가지고 누가 올라가고 누가 내려갈까요?

동일한 z-index에는 실제로 두 가지 상황이 있습니다

1. 두 요소가 배치되지 않으면 위치가 겹치거나, 두 요소가 모두 배치되고 z- 동일한 인덱스의 위치가 겹치는 경우 문서 흐름 순서에 따라 나중에 요소가 이전 요소를 덮어씁니다.

<div style="position:relative;width:200px;height:200px;"></div>
<div style="position:relative; top:-50px; width:100px;height:100px;"><div>

2 두 요소 모두 Z-인덱스가 설정되지 않은 경우 기본값을 사용합니다. 하나는 배치되고 다른 하나는 배치되지 않습니다. 그러면 배치된 요소가 배치되지 않은 요소를 덮습니다

<div style="position:relative;top:50px;width:200px;height:200px;"></div>
<div style=" width:100px;height:100px;"><div>

상위-하위 관계 처리

부모 요소가 유효한 경우 z-색인이 유효하면 자식 요소는 z-색인 설정 여부에 관계없이 부모 요소와 일치하며 부모 요소 위에 있게 됩니다

<div style="position:relative;width:200px;height:200px;z-index:10;">
        <div style="position:relative;width:100px;height:100px;z-index:-5;"><div>
    </div>

z -하위 요소의 인덱스가 상위 요소보다 작게 설정되어 있으면 하위 요소는 여전히 상위 요소 위에 나타납니다

상위 요소의 Z-인덱스가 유효하지 않은 경우(위치가 지정되지 않았거나 기본값을 사용하지 않음) , 그러면 위치가 지정된 하위 요소의 z-index 설정이 적용됩니다

<div>
        <div>
<div>
</div>
<p>z-index=-5 하위 요소가 적용되고 상위 요소에 의해 재정의됩니다</p>
<p><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/024/eb75caa902e9aae6dbbb5eb9ed1d19eb-6.png?x-oss-process=image/resize,p_40" class="lazy" title="CSS 계층 관계를 설정하는 방법" alt="CSS 계층 관계를 설정하는 방법"    style="max-width:90%"  style="max-width:90%" border="0"> </p>
<h3 id="형제-사이의-하위-요소">형제 사이의 하위 요소</h3>
<p>z -형제 요소의 인덱스가 적용되며, 하위 요소의 적용 범위 관계는 상위 요소에 의해 결정됩니다</p><pre class='brush:php;toolbar:false;'><div style="position:relative;width:100px;height:100px;z-index:5;">
        <div style="position:relative;width:50px;height:250px;z-index:50;"></div>
    </div>

    <div style="position:relative;width:100px;height:100px;z-index:10;margin-top:4px;">
        <div style="position:relative;width:30px;height:150px;z-index:-10;"></div>
    </div>

첫 번째 div의 하위 요소의 z-인덱스는 상위 요소 z-로 인해 상대적으로 높습니다. 인덱스가 두 번째 div보다 낮으므로 첫 번째 div 하위 요소는 두 번째 div 및 해당 하위 요소

(동영상 공유 학습: css 동영상 튜토리얼)

에 의해 보호됩니다.