CSS z-index의 가중치 문제에 대한 자세한 설명-CSS 튜토리얼-php.cn

집

웹 프론트엔드

CSS 튜토리얼

CSS z-index의 가중치 문제에 대한 자세한 설명

青灯夜游

Feb 13, 2021 am 09:34 AM

cssz-index

CSS z-index의 가중치 문제에 대한 자세한 설명

이 글은 CSS의 z-index 가중치 문제를 여러분과 공유할 것입니다. 어떻게 하면 최상위에 있고 싶은 요소를 최상위에 두고, 최하위에 있고 싶은 요소를 최하위로 만들 수 있을까요?

1. 실제 전투에서 다음과 같은 Z-index 상황을 살펴보겠습니다.

한 쪽은 위치 지정을 정의하고, 다른 쪽은 위치 지정을 지정하지 않았습니다.
부모 상자 하나는 배치되고 하나는 배치되지 않고 배치되지 않은 하위 상자는 배치되는데 누가 맨 위에 있습니까?
부모 상자가 배치되어 있지만 위치가 지정되지 않은 하위 항목의 위치를 설정하고 위치가 지정된 하위 요소에 Z-색인을 추가합니다.
둘 다 위치가 지정되어 있지만 Z-색인을 설정하지 않았습니다. 맨 위에 있는 사람은 누구인가요?
둘 다 위치에 있고, 하나는 z-index를 1로 설정합니다. 누가 맨 위에 있습니까?

2. 기본 돔 구조와 스타일 설정 및 테스트 준비

기본 돔 구조 정의:

CSS z-index의 가중치 문제에 대한 자세한 설명

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {margin: 0;padding: 0;}
        .box1, .box2 {
            width: 500px;
            height: 200px;
            border: 2px solid;
            margin: 10px;
        }
        .box1 {
            background: yellow;
        }
        .box2 {
            background: aqua;
        }
        .redDiv, .blueDiv {
            width: 150px;
            height: 150px;
        }
        .redDiv {
            background: red;
        }
        .blueDiv {
            background: blue;
        }
    </style>
</head>
<body>
    <div>
        <div></div>
    </div>
    <div>
        <div></div>
    </div>
</body>
</html>

3. 테스트 시작

테스트 문제 1:

A 정의 한 사람은 정의된 위치를 갖고 있고 다른 하나는 정의된 위치가 없으면 누가 맨 위에 있습니까?

box2의 위치를 설정하고 위치를 변경합니다

.box2 {
   background: aqua;
   position: fixed;
   left: 100px;
   top: 30px;
}

효과:

box2가 box1 위에서 실행되었습니다.

CSS z-index의 가중치 문제에 대한 자세한 설명

시험 문제 2:

부모 상자는 위치가 지정되어 있고 하나는 위치가 지정되지 않았으며 위치가 지정되지 않은 하위 항목이 위치를 설정합니다. 누가 맨 위에 있습니까?

box1에서 redp의 위치를 설정했습니다.

.redp {
   background: red;
   position: fixed;
   }

효과:

box2는 여전히 box1 위에 있습니다. 또한 box1의 위치 지정된 하위 요소에도 있습니다.

CSS z-index의 가중치 문제에 대한 자세한 설명

테스트 문제 3:

부모 상자가 배치되어 있고 하나는 배치되지 않았으며 위치가 지정되지 않은 자식은 위치를 설정하고 배치된 자식 요소에 z-index를 추가합니다. 맨 위에 있는 사람은 누구입니까?

box1의 redp에 z-index를 추가합니다

.redp {
   background: red;
   position: fixed;
   z-index: 1;
   }

효과:
redp는 상단에, box2는 중간에, box1은 하단에 있습니다.

CSS z-index의 가중치 문제에 대한 자세한 설명

테스트 문제 4:

둘 다 위치가 지정되어 있지만 Z-색인을 설정하지 않았습니다. 누가 맨 위에 있습니까?

먼저 초기 스타일 코드를 복원한 다음 다시 변경합니다.
초기 코드에서 box1과 box2의 스타일을 변경하세요

.box1 {
    background: yellow;
    position: fixed;}.box2 {
    background: aqua;
    position: fixed;
    left: 100px;
    top: 30px;}

효과:
box2가 box1 위에 있습니다
CSS z-index의 가중치 문제에 대한 자세한 설명

테스트 문제 5:

둘 다 위치가 지정되어 있고, 하나는 z-index를 1로 설정합니다. 위에?

box1의 z-index를 1로 설정해 보겠습니다.

.box1 {
    background: yellow;
    position: fixed;
    z-index: 1;}

효과:
box1은 box2 위에서 실행됩니다.
CSS z-index의 가중치 문제에 대한 자세한 설명

4. 결론

위치가 지정된 요소는 위치가 지정되지 않은 요소 위에 있습니다
마찬가지로 나중 요소는 이전 요소 위에 배치됩니다.
같은 레벨의 부모는 모두 [자식 무시]로 배치되고, z-index가 더 높은 사람이 맨 위에 배치됩니다.
한 부모가 배치되고, 다른 부모가 배치됩니다. 위치 지정이 없고 위치 지정되지 않은 요소의 하위 요소가 위치 지정되면 위치가 지정된 하위 요소와 위치가 지정된 상위 요소에 따라 어느 요소의 z-인덱스가 더 높은지 확인합니다.

더 많은 프로그래밍 관련 지식을 보려면 프로그래밍 교육을 방문하세요! !

위 내용은 CSS z-index의 가중치 문제에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명

이 기사는 csdn에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제

관련 기사