위치와 함께 작동하지 않는 'transform3d': 고정 하위

일반적인 CSS 환경에서 고정 div가 지정된 위치 ( top:0px, left:0px)에 정확하게 위치하는 상황이 있습니다 .

translate3d 변환이있는 부모가 있다면 이것은 존중되지 않는 것 같습니다. 뭔가 보이지 않습니까? 스타일 및 변형 원점 옵션과 같은 다른 웹킷 변환을 시도했지만 운이 없었습니다.

JSFiddle 을 첨부했습니다 . 노란색 상자가 컨테이너 요소가 아닌 페이지의 상단 모서리에있을 것으로 예상되는 예제입니다.

아래에서 간단한 바이올린 버전을 찾을 수 있습니다.

#outer {
    position:relative; 
    -webkit-transform:translate3d(0px, 20px , 0px); 
    height: 300px; 
    border: 1px solid #5511FF; 
    padding: 10px;
    background: rgba(100,180,250, .8); 
    width: 80%;
}
#middle{
    position:relative; 
    border: 1px dotted #445511; 
    height: 300px; 
    padding: 5px;
    background: rgba(250,10,255, .6);
}
#inner {
    position: fixed; 
    top: 0px;
    box-shadow: 3px 3px 3px #333; 
    height: 20px; 
    left: 0px;
    background: rgba(200,180,80, .8); 
    margin: 5px; 
    padding: 5px;
}

<div id="container">
    Blue: Outer, <br>
    Purple: Middle<br>
    Yellow: Inner<br>
    <div id="outer"> 
        <div id="middle">
            <div id="inner">
                Inner block
            </div>
        </div>
    </div>
</div>

고정 위치 아동과 translate3d를 함께 사용하려면 어떻게해야합니까?

이는 W3C 사양에transform 따라 새로운 로컬 좌표계를 생성 하기 때문입니다 .

HTML 네임 스페이스 none에서 변환 이외의 값 은 스택 컨텍스트와 포함 블록을 모두 생성합니다. 객체는 고정 위치 자손의 포함 블록으로 작동합니다.

이는 고정 위치가 뷰포트가 아닌 변환 된 요소에 고정됨을 의미합니다.

현재 내가 알고있는 해결 방법이 없습니다.

또한 Eric Meyer의 기사 : CSS 변환으로 고정 요소 고정 해제에 설명되어 있습니다.

페이지의 항목이 변환을 사용할 때 고정 상위 탐색 메뉴에서 깜박임이 발생했습니다. 상위 탐색 메뉴에 적용된 다음 항목이 점프 / 깜박임 문제를 해결했습니다.

#fixedTopNav {
    position: fixed;
    top: 0;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
}

SO에 대한이 답변 덕분에

Bradoergo가 제안한 것처럼 창을 가져 와서 다음 scrollTop과 같이 절대 위치 상단에 추가하십시오.

function fix_scroll() {
  var s = $(window).scrollTop();
  var fixedTitle = $('#fixedContainer');
  fixedTitle.css('position','absolute');
  fixedTitle.css('top',s + 'px');
}fix_scroll();

$(window).on('scroll',fix_scroll);

어쨌든 이것은 나를 위해 일했습니다.

Firefox 및 Safari에서는 position: sticky;대신 사용할 수 position: fixed;있지만 다른 브라우저에서는 작동하지 않습니다. 이를 위해서는 자바 스크립트가 필요합니다.

내 생각에, 이것을 처리하는 가장 좋은 방법은 동일한 번역을 적용하는 것이지만 부모 (번역 된) 요소에서 수정 해야하는 자식을 분리하는 것입니다. 그런 다음 position: fixed래퍼 내부의 div에 번역을 적용하십시오 .

결과는 다음과 같습니다 (귀하의 경우).

<div style='position:relative; border: 1px solid #5511FF; 
            -webkit-transform:translate3d(0px, 20px , 0px); 
            height: 100px; width: 200px;'> 

</div>
<div style='position: fixed; top: 0px; 
            box-shadow: 3px 3px 3px #333; 
            height: 20px; left: 0px;'>
    <div style='-webkit-transform:translate3d(0px, 20px, 0px);'>
        Inner block
    </div>
</div>

JSFiddle : https://jsfiddle.net/hju4nws1/

이것은 일부 유스 케이스에는 이상적이지 않지만 일반적으로 div를 수정하는 경우 부모의 요소 / 요소가 DOM의 상속 트리에서 떨어지는 부분에 대해 신경 쓰지 않을 수 있으며 대부분의 두통을 해결하는 것으로 보입니다. - 여전히 모두를 허용하는 동안 translate과 position: fixed(상대)의 조화에 살고합니다.

나는 같은 문제를 겪었다. 유일한 차이점은 'position : fixed'이있는 내 요소에는 JS에서 'top'및 'left'스타일 속성이 설정되어 있다는 것입니다. 그래서 수정 사항을 적용 할 수있었습니다.

var oRect = oElement.getBoundingClientRect();

oRect 객체에는 실제 (포트를 기준으로) 상단 및 왼쪽 좌표가 포함됩니다. 따라서 실제 oElement.style.top 및 oElement.style.left 속성을 조정할 수 있습니다.

-webkit-transform : translate3d를 사용하는 오프 캔버스 사이드 바가 있습니다. 이로 인해 페이지에 고정 바닥 글을 배치하지 못했습니다. 사이드 바 초기화시 태그에 추가 된 html 페이지의 클래스를 대상으로 한 다음 css : not 한정자를 작성하여 "-webkit-transform : none;"상태로 문제를 해결했습니다. 해당 클래스가 html 태그에없는 경우 html 태그에 추가하십시오. 이것이 동일한 문제로 누군가를 도울 수 있기를 바랍니다!

자식 요소에 반대 변환을 적용하십시오.

<div style='position:relative; border: 1px solid #5511FF; 
            -webkit-transform:translate3d(0px, 20px , 0px); 
            height: 100px; width: 200px;'> 
    <div style='position: fixed; top: 0px; 
                -webkit-transform:translate3d(-100%, 0px , 0px); 
                box-shadow: 3px 3px 3px #333; 
                height: 20px; left: 0px;'>
        Inner block
    </div>
</div>

요소가 변형되는 동안 동적 클래스를 추가하십시오. $('#elementId').addClass('transformed'). 그런 다음 CSS로 선언하십시오.

.translat3d(@x, @y, @z) { 
     -webkit-transform: translate3d(@X, @y, @z); 
             transform: translate3d(@x, @y, @z);
      //All other subsidaries as -moz-transform, -o-transform and -ms-transform 
}

그때

#elementId { 
      -webkit-transform: none; 
              transform: none;
}

그때

.transformed {
    #elementId { 
        .translate3d(0px, 20px, 0px);
    }
}

이제 자식 요소에 및 속성 값이 position: fixed제공되면 잘 작동하고 부모 요소가 변환 될 때까지 고정되어 있습니다. 변환이 복귀되면 하위 요소가 다시 고정 된 것으로 나타납니다. 클릭하면 열리고 닫히는 탐색 사이드 바를 실제로 사용하고 페이지를 아래로 스크롤 할 때 고정되는 탭 세트가있는 경우 상황이 완화됩니다.topz-index

이를 처리하는 한 가지 방법은 동일한 변환을 고정 요소에 적용하는 것입니다.

<br>
<div style='position:relative; border: 1px solid #5511FF; 
            -webkit-transform:translate3d(0px, 20px , 0px); 
            height: 100px; width: 200px;'> 
    <div style='position: fixed; top: 0px; 
                -webkit-transform:translate3d(0px, 20px , 0px); 
                box-shadow: 3px 3px 3px #333; 
                height: 20px; left: 0px;'>
        Inner block
    </div>
</div>