2017-03-07 7 views
0

이 정보는 Chrome 브라우저에서 테마, 3D, 변형, 슬라이더, 애니메이션을 사용하는 프로젝트에서 작업 할 때 "위치가 고정 된"문제를 경험하는 다른 사용자에게 도움이되기를 바랍니다.CSS 변형 부모 및 고정 자식. 변환 설정을 사용하여 노드를 분해 할 수있는 방법이 있나요?

문제 : 고정 된 위치에 배치 된 요소 : 올바른 위치에 나타나지 않고 끊어지지 않으며 부모 컨테이너에 고정됩니다.

더 자세한 내용 : 상위 상위 위치 요소의 모든 상위 요소가있는 고정 하위 요소로 부모에게 수정 또는 고정되어 예상대로 뷰포트에 고정되지 않습니다.

이에 대한 답변에 의해 지정됩니다 https://stackoverflow.com/revisions/15256339/2

이 문제는 변형 때문에 발생하는 것으로 나타납니다에서 SAML하면 해당 요소의 어린이가 사용할 요소에 대한 새 로컬 좌표 시스템을 작성합니다. 이로 인해 position : fixed를 가진 모든 요소는 변형이 none이 아닌 마지막 요소로 고정됩니다.

이 내용은 https://www.w3.org/TR/css-transforms-1/#transform-rendering에 명시된대로 크롬에서 작동하며 버그가 아닙니다.

후속 질문으로 변형 요소 내에 중첩 된 요소가 변형 요소에서 완전히 벗어나는 것을 허용하는 기능 요청이 작성 되었습니까?

중첩 된 요소의 위치를 ​​편집 할 수없는 경우 (예 : 사용자가 태그를 관리하지 않는 경우) 요소를 변형하고 그 아이는, 보디 좌표계 내에서 표시되도록 (듯이)합니다. 이것에 대한 제안이 있습니까? 그렇지 않다면?

답변

0

저는 CSS 속성 변환 집합이있는 부모 요소에서 자식 요소를 구분할 수있는 솔루션이 없습니다. 보다 나은 해결책이 발견 될 때까지 부모님에 대한 변환을 해제하려면 아래의 작업을 참조하십시오. 이 같은 대답도 발견

(당신이 세트를 변환하도록 부모가 필요한 경우 작동하지 않습니다) :

솔루션 없음 변환을 설정하여 하위 항목을 브레이크 아웃합니다 - 여기 https://stackoverflow.com/revisions/15256339/2 와 - 여기 https://css-tricks.com/forums/topic/fixed-positioning-not-working-in-chrome/#post-188228

자식을 잡는 부모 요소에 다음 속성을 설정하십시오. 이것은 w3c 스펙 (위의 링크 참조)에 해당하며 FF에는 영향을주지 않습니다.
-webkit-transform : none! important; 변형 : 없음! 중요;

부모 컨테이너를 상대적 위치로 설정해야합니다.