목록플로팅 메뉴 (1)

sohyeon kim

[CSS] 스크롤 따라다니는 플로팅 메뉴 position: sticky

👀 영화 검색 사이트 제작 중 검색 창이 스크롤을 따라다니게 만들고 싶었다! ~ scroll ~ ⬇️ 왼쪽에 있는 serch-container 를 고정해 두었다! 💡 설정 코드 HTML ~ Search movie title Click CSS ~ #search-container { align-self: flex-start; position: sticky; top: 0; padding: 10px; } 그리고 설정하다 잘 안되서 찾아본 정보들.. 1. 임계값 설정 고정할 요소에 아래 속성 중 하나 이상에 대해 "auto" 이외의 값을 설정해야 한다. top: 0; right: 0; bottom: 0; left: 0; 2. 사파리 벤더 접두사 추가 사파리 브라우저에서 기능하도록! position: -webkit..
CSS 2024. 1. 9. 21:05
이전 Prev 1 Next 다음