새 제목: 내 요점은: Flexbox를 사용할 때 고정 요소의 고정 속성이 유지되지 않는다는 것입니다.

Question

저는 한동안 이 문제에 갇혀 있었고 이 위치: 끈적끈적 + flexbox 문제:

를 공유하고 싶었습니다.

Flexbox 컨테이너 보기로 전환한 후 내 고정 div가 Flexbox 상위 요소에 래핑될 때 갑자기 더 이상 고정되지 않습니다.

.flexbox-wrapper {
  디스플레이: 플렉스;
  높이: 600px;
}
.정기적인 {
  배경색: 파란색;
}
.끈적끈적한 {
  위치: -webkit-sticky;
  위치: 끈적끈적함;
  상단: 0;
  배경색: 빨간색;
}

  

    이건 일반 상자에요
  
  

    이건 끈끈한 상자야
  

Answer 1

제 경우에는 상위 컨테이너에 overflow-x: hidden;这个样式，这会破坏position: sticky의 기능이 적용되었습니다. 이 규칙을 제거해야 합니다.

어떤 상위 요소에도 위의 CSS 규칙이 적용되어서는 안 됩니다. 이 조건은 'body' 요소까지(포함하지 않음) 모든 상위 요소에 적용됩니다.

Answer 2

Flexbox 요소의 기본값은 stretch이므로 모든 요소의 높이가 동일하며 스크롤할 수 없습니다.

sticky 요소에 align-self: flex-start를 추가하고 높이를 자동으로 설정하면 스크롤 및 고정이 가능해집니다.

현재 모든 주요 브라우저에서 지원되지만 Safari에서는 -webkit-前缀，而除了Firefox之外的其他浏览器在使用position: sticky의 테이블을 사용하는 데 여전히 몇 가지 문제가 있습니다.

으아악 으아악