스크롤 할 때 따라 오도록 포함 부모 내에서 고정 할 헤더를 배치해야합니다. 문제는
position:fixed
부모가 아니라 브라우저에 위치를 고정시킵니다. 결과적으로 너비가 오버플로 된 가로 스크롤이있는 컨테이너 (컨테이너가 컨테이너보다 넓음)가있는 컨테이너는 테이블의 내용과 같이 오버플로 스크롤이 없습니다.
피들 데모 참조
여기서 목표는 헤더의 위치를 고정하는 것이지만 상위 컨테이너에 상대적으로 고정됩니다. 이 바이올린에서 내가 CSS 블록을 주석 처리 한 것을 볼 수 있습니다 :
.container{
/*-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);*/
-webkit-transform: none;
-moz-transform: none;
-ms-transform: none;
transform: none;
}
현재 CSS 블록 (transform이 none으로 설정 됨)을 translateZ가있는 CSS 블록으로 바꾸면 헤더가 상위 컨테이너 내에 배치되지만 더 이상 고정되지 않습니다.
이 문제를 해결하는 방법을 아는 사람이 있습니까? 선호되는 솔루션은 CSS/HTML만이 고 JS는 피하지만 다른 것이 없다면 JS는 물론 내가해야 할 것입니다!
- 답변 # 1
- 답변 # 2
부모 내에 고정 된 요소를 유지하려면
position: fixed
를 사용하여 수행 할 수 없습니다position: fixed
때문에 흐름에서 요소를 제거하므로 부모가 없습니다. 뷰포트를 기준으로 위치합니다.목표를 달성하기 위해 단순하고 효율적으로 작업하기 위해, "절대적으로 배치 된 요소를 페이지의 요소에 효율적으로 첨부 할 수있는 클라이언트 측 라이브러리"인 Tether를 고려할 수 있습니다.
이것이 도움이되기를 바랍니다. 행운을 빕니다.
- 답변 # 3
헤더의 위치를 '절대'로 설정하고 상위 컨테이너 (상대적으로 원함)를 '상대적'으로 설정하고 상위의 상위에 고정되도록 설정하십시오. 'top : 0'으로
CSS :
.container { position: relative; } .child { position: absolute; top: 0; }
관련 자료
- html - 위치가 고정 된 요소는 모바일에서 스크롤 할 때 절반으로 숨겨집니다
- 프롤로그의 중첩 된 목록 내에서 요소의 위치 찾기
- Java에서 정수의 2D 배열에서 요소의 위치 찾기
- python - 기본 함수없이 배열의 특정 위치에 요소 삽입
- html - 위치를 스크롤 할 수 없도록 고정
- html - 기존 중앙 요소의 위치를 변경하지 않고 요소 범위 추가
- Docker 컨테이너 내의 Azure CLI 로그인
- python : Tkinter에서 위젯의 창으로 고정 된 위치를 만드는 방법은 무엇입니까?
- css - 중앙으로 HTML 요소의 상대적 위치 설정
- JavaScript Chrome Extension으로 만든이 요소를 배치
- html - 요소 아래에 요소를 어떻게 배치합니까?
- python - 팬더 열 내의 단어 위치
- java - Selenium Webdriver 웹 요소 내에서 웹 요소 찾기
- c++ - 사용자 지정 시작/끝 위치로 컨테이너를 반복합니다
- javascript - 페이지 하단에 고정 된 스크롤 가능한 요소
- 도커 컨테이너 내에서 phpUnit 테스트 실행
- javascript - 반응, 현재 요소의 현재 마우스 위치를 얻으려면
- selector : Cypress -다른 요소 내에서 요소 선택 -`within`에 대한 선택기 구문 바로 가기
- javascript - React의 목록에서 선택된 요소
- html - CSS에서 요소 절대 위치가 겹치지 않게하는 방법
- javascript : Angular에서 입력 클릭 이벤트를 기반으로 페이지 위로 이동
- javascript : 내 웹 개발 code를 처리하는 데 어려움이 있습니다.
- javascript : RGB 값으로 회색 음영 얻기
- javascript : html, css, js로 onclick 이벤트를 어떻게 할 수 있습니까?
- javascript : 캔버스에서 버튼을 정렬하고 스타일을 지정하는 방법은 무엇입니까?
- javascript : 내 웹사이트의 모바일 버전 버거 버튼이 드롭다운되지 않음
- javascript : .click 토글 기능을 어떻게 재설정합니까?
- javascript : EventListener에서 JS 기본값을 깨는 함수 매개 변수
- JavaScript(DOM)를 사용하여 색상 변경
- javascript : 누구든지 배경색으로 캔버스 이미지를 저장하는 방법을 말해 줄 수 있습니까?
CSS는이 작업을 자체적으로 수행 할 수 없습니다.
Position: fixed
요소를 포함하지 않고 뷰포트와 관련하여 작동합니다.CSS3
transform
를 사용하여이 문제를 해결하려는 시도를 보았습니다. 속성,하지만 (첫 번째 답변에 대한 귀하의 의견에서 언급했듯이) 작동하지 않는 것 같습니다.클라이언트 측 라이브러리를 사용할 수 없다는 것을 알고 있지만 이것이 내 지식으로는 사용할 수있는 유일한 솔루션입니다. 언젠가 이것을 필요로하는 다른 사람들을 위해, 여기에 효과적인 해결책이 있습니다. 약간의 jQuery를 사용합니다.
x 및 y 축을 따라 고정 된 위치 요소 (예 : 가로 및 세로로 고정 된 위치)로 다른 요소 내부에 요소 위치 지정
http://jsfiddle.net/8086p69z/8/
HTML
CSS (관련 섹션)
jQuery