저는 한동안 이 문제에 갇혀 있었고 이 위치: 끈적끈적 + flexbox 문제:
Flexbox 컨테이너 보기로 전환한 후 내 고정 div가 Flexbox 상위 요소에 래핑될 때 갑자기 더 이상 고정되지 않습니다.
.flexbox-wrapper { 디스플레이: 플렉스; 높이: 600px; } .정기적인 { 배경색: 파란색; } .끈적끈적한 { 위치: -webkit-sticky; 위치: 끈적끈적함; 상단: 0; 배경색: 빨간색; } 이건 일반 상자에요이건 끈끈한 상자야
JSFiddle 표시 문제
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
제 경우에는 상위 컨테이너에
overflow-x: hidden;这个样式，这会破坏position: sticky의 기능이 적용되었습니다. 이 규칙을 제거해야 합니다.어떤 상위 요소에도 위의 CSS 규칙이 적용되어서는 안 됩니다. 이 조건은 'body' 요소까지(포함하지 않음) 모든 상위 요소에 적용됩니다.
Flexbox 요소의 기본값은
stretch이므로 모든 요소의 높이가 동일하며 스크롤할 수 없습니다.sticky 요소에
align-self: flex-start를 추가하고 높이를 자동으로 설정하면 스크롤 및 고정이 가능해집니다.현재 모든 주요 브라우저에서 지원되지만 Safari에서는
-webkit-前缀，而除了Firefox之外的其他浏览器在使用position: sticky의 테이블을 사용하는 데 여전히 몇 가지 문제가 있습니다.