CSS 가 제어 되 지 않 는 position fixed 에 대한 자세 한 설명

실효 position:fixed
많은 경우 position:fixed 는 효력 을 잃 습 니 다.MDN 은 한 마디 로 이러한 상황 을 요약 했다.
원소 조상 들 의 transform 속성 이 none 이 아 닐 때 포 지 셔 닝 용 기 는 시각 에서 조상 으로 바 뀌 었 다.
What！이런 조작 도 있어 요?일부 학생 들 이 위 에 올 라 가지 않 았 다 는 뜻 일 수도 있 습 니 다.쉽게 말 하면 position:fixed 요 소 를 지정 한 것 입 니 다.만약 에 조상 요소 가 none 이 아 닌 transform 값 이 존재 한다 면 이 요 소 는 transform 을 설정 한 조상 요소 에 비해 포 지 셔 닝 을 할 것 입 니 다.
그렇다면 왜 이런 상황 이 벌 어 졌 을 까?상대 적 인 시점(Viewport)포 지 셔 닝 은?
이 문 제 는 Stacking Context,즉 문맥 을 쌓 는 개념 과 관련된다.위의 문 제 를 설명 하 는 것 은 두 단계 로 나 뉜 다.
1.none 이 아 닌 transform 값 은 컨 텍스트(Stacking Context)와 블록(Containing Block)을 만 들 수 있 습 니 다.
2.컨 텍스트 의 생 성 으로 인해 이 요 소 는 하위 요소 의 고정 위치 에 영향 을 줄 수 있 습 니 다.position:fixed 의 하위 요 소 는 viewport 포 지 셔 닝 을 기반 으로 하지 않 고 이 부모 요 소 를 기반 으로 합 니 다.
Stacking Context--컨 텍스트 쌓 기
좋 습 니 다.좋 습 니 다.또 새로운 명사 가 나 왔 습 니 다.문맥 을 쌓 습 니 다.또 무엇 입 니까?
컨 텍스트 쌓 기(Stacking Context):컨 텍스트 쌓 기 는 HTML 요소 의 3 차원 개념 입 니 다.이러한 HTML 요 소 는 가상 으로(컴퓨터 화면의)창 이나 웹 페이지 를 대상 으로 하 는 사용자 의 z 축 에 연장 되 고 HTML 요 소 는 자신의 속성 에 따라 우선 순위 에 따라 컨 텍스트 를 겹 치 는 공간 을 차지 합 니 다.
개념 이 추상 적 이 고 간단하게 이해 하 며 Stacking Context 를 생 성 한 요 소 는 이 요소 의 중첩 관계 와 포 지 셔 닝 관계 에 영향 을 줄 수 있다 는 것 을 기억 합 니 다.
Stacking Context 를 생 성 한 요소 가 이 요소 의 중첩 관계 에 영향 을 줄 수 있다 는 점 에 대해 구체 적 으로 이 글 의 중첩 순서(stacking level)와 스 택 컨 텍스트(stacking context)가 얼마나 알 고 있 는 지 볼 수 있 습 니 다.
본 고 는 Stacking Context 를 생 성 하 는 요소 가 이 요소 의 포 지 셔 닝 관계 에 영향 을 줄 수 있다 고 언급 했다.위의 설명 에 따 르 면 상하 문 을 쌓 아 올 리 면 이 요 소 는 하위 요소 의 고정 위치 에 영향 을 줄 수 있다.position:fixed 의 하위 요 소 는 viewport 포 지 셔 닝 을 기반 으로 하지 않 고 이 부모 요 소 를 기반 으로 합 니 다.
그러면 문제 가 생 겼 습 니 다.컨 텍스트 를 쌓 을 수 있 는 모든 요 소 를 만 들 수 있 는 지,하위 요소 의 position:fixed 가 상대 적 으로 시각(Viewport)이 아 닌 포 지 셔 닝 을 할 수 있 습 니까?
겹 쳐 쓰기 상하 문 만 드 는 방법
이 를 위해 서 는 먼저 요 소 를 쌓 아 올 릴 수 있 는 모든 방법 을 찾 아야 한다.
So,어떻게 하나의 요 소 를 촉발 하여 겹 쳐 진 상하 문 을 형성 합 니까?방법 은 다음 과 같 습 니 다(MDN 참조).
1.루트 요소(HTML),
2.z-index 값 은"auto"의 절대/상대 위치 가 아 닙 니 다.
3.z-index 값 이"auto"가 아 닌 flex 항목(flex item),즉 부모 요소 display:flex|inline-flex,
4.opacity 속성 값 이 1 보다 작은 요소(the specification for opacity 참조),
5.transform 속성 값 은"none"요소 가 아 닙 니 다.
6.mix-blend-mode 속성 값 은"normal"요소 가 아 닙 니 다.
7.filter 값 은"none"요소 가 아 닙 니 다.
8.perspective 값 은"none"요소 가 아 닙 니 다.
9.isolation 속성 은"isolate"요소 로 설정 되 어 있 습 니 다.
10.position: fixed
11.will-change 에서 임의의 CSS 속성 을 지 정 했 습 니 다.이 속성의 값 을 직접 지정 하지 않 았 더 라 도.
12.-webkit-over flow-scrolling 속성 이"touch"요소 로 설정 되 어 있 습 니 다.
다음은 위의 속성 스타일 중 하 나 를 설정 한 모든 요소 가 하위 요소 의 position:fixed 를 무효 화 하 는 능력 이 있 는 지 검증 해 야 합 니 다.
이 를 위해 나 는 최신 블 링크 커 널 을 바탕 으로 다음 작은 실험 을 했다.도장 가능:
겹 쳐 진 상하 문 이 fixed 포 지 셔 닝 에 미 치 는 영향(브 라 우 저 마다 표현 이 다 를 수 있 음)

h1 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 999;
    height: 10vh;
    line-height: 10vh;
    color: #333;
    font-size: 1.5vw;
}

select {
    height: 10vh;
    line-height: 10vh;
    font-size: 1vw;
    outline: none;
    border: 1px solid #333;
}

.container {
    width:10vw;
    height: 10vw;
    // transform: translate3d(5vw, 5vw, 0);
    // will-change: transform;
    background: rgba(255, 100, 100, .8);
}

.fixed {
    position: fixed;
    top: 1vw;
    left: 1vw;
    right: 1vw;
    bottom: 1vw;
    background: rgba(100, 100, 255, .8);
}

.g-absolute {
    position: absolute;
    z-index: 10;
}

.g-flex {
    display: flex;
    z-index: 10;
}

.g-opacity {
    opacity: .5;
}

.g-transform {
    transform: translate3d(0, 0, 0);
    // transform: scale(1);
}

.g-blend {
    mix-blend-mode: screen;
}

.g-filter {
    filter: blur(5px);
}

.g-perspective {
    perspective: 1000px;
}

.g-isolation{
    isolation: isolate;
}

.g-fixed {
    position: fixed;
}

.g-willChange {
    will-change: transform;
}

.g-scrolling {
    -webkit-overflow-scrolling: touch;
}

.g-backface {
    backface-visibility: hidden;
}

.g-preserve3d {
    transform-style: preserve-3d;
}

.g-contain {
    contain: paint;
}

<div class="container"> 
  <div class="fixed"> </div>
</div>

(function () {
  let old = "";
  let dom = $(".container");

  $('#select').on("change", function (e) {
    let current = $(this).val();
    dom.removeClass(old).addClass(current);
    old = current;
  });
})();

우 리 는 두 개의 부자 div,하위 요소 fixed 포 지 셔 닝 을 설정 하고 부모 요 소 를 수정 하여 겹 쳐 진 컨 텍스트 를 생 성하 여 하위 요소 의 fixed 포 지 셔 닝 이 더 이상 상대 적 으로 눈 에 띄 지 않 는 지 관찰 합 니 다.

<div class="container">
  <div class="fixed"> </div>
</div>

최초의 CSS:

.container {
    width:10vw;
    height: 10vw;
    background: rgba(255, 100, 100, .8);
}
 
.fixed {
    position: fixed;
    top: 1vw;
    left: 1vw;
    right: 1vw;
    bottom: 1vw;
    background: rgba(100, 100, 255, .8);
}

position:fixed 실효 의 최종 원인 탐색
위의 시험 을 통 해 최신 Blink 커 널 에서 겹 쳐 진 컨 텍스트 를 생 성 할 수 있 는 모든 요소 가 position:fixed 를 무효 로 하 는 것 은 아니 지만 transform 뿐만 아니 라 position:fixed 를 무효 로 합 니 다.
그래서 MDN 은 position:fixed 에 대한 보충 설명 이 완선 되 지 않 습 니 다.다음 세 가지 방식 은 현재 position:fixed 포 지 셔 닝 의 기준 요 소 를 변화 시 킬 것 이다(본 고의 중점).
1.transform 속성 값 은 none 요소 가 아 닙 니 다.
2.perspective 값 은 none 요소 가 아 닙 니 다.
3.will-change 에서 임의의 CSS 속성 을 지정
서로 다른 내부 핵의 다른 표현
끝났어 요?없다우 리 는 다른 내부 의 표현 을 다시 한번 보 자.
위 에서 도 언급 한 바 와 같이 이 같은 결론 은 최신 크롬 브 라 우 저(Blink 커 널)에서 테스트 를 통 해 MAC 의 Safari 브 라 우 저(WebKit 커 널,Version 9.1.2(11601.7.7)와 IE Trident/커 널 및 Edge 브 라 우 저 에서 상기 세 가지 방식 은 position:fixed 의 표현 을 바 꾸 지 않 는 다 는 것 을 발견 했다.
따라서 position:fixed 포 지 셔 닝 기준 요소 가 바 뀌 었 을 때 구체 적 인 문 제 를 구체 적 으로 분석 하고 많이 시도 해 야 합 니 다.필요 에 따라 적당 한 브 라 우 저 를 호 환 하여 조정 해 야 합 니 다.일률적으로 논 할 수 없습니다.
질문
물론 position:fixed 는 이동 단 에서 머리,밑부분 모듈 의 포 지 셔 닝 을 실현 합 니 다.또는 position:fixed 에서 input 를 사용 하 는 데 도 문제 가 있 을 수 있 습 니 다.이 글 은 많은 글 들 이 묘사 하고 해결 방안 이 존재 합 니 다.본 고 는 이 문 제 를 토론 하지 않 습 니 다.
이상 은 CSS 가 제어 되 지 않 는 position fixed 의 상세 한 내용 을 상세 하 게 설명 하 는 것 입 니 다.CSS 가 제어 되 지 않 는 position fixed 에 관 한 자 료 는 다른 관련 글 을 주목 하 십시오!