CSS의 계단식 컨텍스트에 대한 심층 분석

이 기사에서는 CSS의 계단식 컨텍스트에 대해 설명하고 예제를 통해 계단식 수준을 비교합니다. 모든 사람에게 도움이 되기를 바랍니다.

얼마 전 회사에서 로우코드 플랫폼 사업을 추진하기 시작했는데 운이 좋게도 제가 참여하게 됐어요. 이 기간 동안 CSS의 Cascading context가 관련되어 있었는데, 이로 인해 비즈니스 로직을 더 잘 구현하려면 CSS의 Cascading context를 깊이 연구하는 것이 더 낫다고 생각했습니다. 웹 페이지는 2차원이지만 콘텐츠는 3차원이라는 사실은 누구나 알고 있을 것입니다. 더 직관적인 x와 y 외에도 그다지 직관적이지 않은 z축도 있습니다.

계단식 컨텍스트 요소

일상적인 개발 프로세스에는 계단식 컨텍스트와 관련하여 일반적으로 사용되는 몇 가지 속성이 있습니다. | right

• transform

• 스태킹 레벨 비교

상위와 손자를 포함하지 않는 간단한 레벨 비교:

• z-index: -1 0

• 조상 요소와 관련된 쌓임 컨텍스트가 생성되면 자손 요소의 쌓임 수준은 조상 요소의 영향을 받습니다.

참고:

계단식 컨텍스트 계층 구조는 HTML 요소 계층 구조의 하위 요소입니다. 특정 요소만 계단식 컨텍스트를 생성하기 때문입니다. 자신의 스태킹 컨텍스트를 생성하지 않는 요소는 상위 스태킹 컨텍스트에 동화된다고 할 수 있습니다.

실제 문제시각적 구현 과정에서 문제에 직면했습니다. 중첩된 수준의 드래그 앤 드롭 프로세스 중에 중첩된 상위 요소에 이미 존재하는 계층적 문제로 인해 상위 요소가 상위 요소의 영향을 받았습니다. 그 영향은 드래그할 때 "일반적인 문서 흐름" 요소로 덮이게 된다는 것입니다. 일정 기간의 연구 끝에 이 문제는 다양한 스태킹 컨텍스트의 영향으로 인해 발생하는 것으로 밝혀졌습니다.

실전적인 전투

1. 동일 레벨의 캐스케이딩 컨텍스트 비교

코드가 너무 많아서 지면을 낭비하지 않고 여기서 직접 작업 결과를 보여드리겠습니다. 아래 그림을 통해 위에서 언급한 동일 레벨의 계층적 비교를 확인할 수 있다.

2. 서로 다른 위치의 스택 컨텍스트 비교

위치의 경우 z-index를 사용하지 않으면 Brother 요소의 스택 컨텍스트가 Brother 요소의 스택 컨텍스트보다 큽니다. 인간의 관점에서 이는 다음 요소의 계단식 컨텍스트가 이전 요소의 계단식 컨텍스트보다 높다는 것을 의미합니다.

    .fixed {
      position: fixed;
      top: 0;
      left: 0;
      background: red;
    }

    .relative {
      position: relative;
      top: 20px;
      left: 20px;
      background: green;
    }

    .absolute {
      position: absolute;
      top: 60px;
      left: 60px;
      background: yellow;
    }

    .sticky {
      position: sticky;
      top: 60px;
      left: 90px;
      background: pink;
    }

3. 다양한 스택 컨텍스트에서의 스택 레벨 비교

우선 위에서 언급한 실제 문제를 재현하고 다양한 스택 컨텍스트에서 스택 레벨을 구현해 보겠습니다.

빨간색 블록과 녹색 블록은 동일한 레벨의 두 요소입니다. 따라서 빨간색 블록의 두 요소는 녹색 스택 수준보다 낮습니다. 주황색 블록 요소이지만 실제 효과는 그렇습니다. 주황색은 다른 블록 요소보다 스택 수준이 낮습니다.

    .purple {
      top: 20px;
      left: 20px;
      background: purple;
      z-index: 10;
    }

    .pink {
      top: 60px;
      left: 60px;
      background: pink;
      z-index: 20;
    }

    .orange {
      top: 10px;
      left: 10px;
      background: orange;
      z-index: 999;
    }

여기서는 위 문제에 대한 나의 해결책을 언급하겠습니다. 그것은 조상 요소의 스택 수준을 동적으로 수정하는 것입니다. 하지만 개인적으로 이 방법은 중첩 수준이 많을 때 번거롭다고 생각합니다. 더 좋은 방법이 있으신 분은 아래에 메시지를 남겨주세요.

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

위 내용은 CSS의 계단식 컨텍스트에 대한 심층 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!