OK DDODDO LAB

  • 홈
  • 태그
  • 방명록

displayflex 1

position: sticky > 요소 고정 사용

스크롤 시 특정 지점에서 요소(element)를 고정 하기위해서는 position: sticky 값을 사용하면 되는데, sticky가 제대로 고정 되지 않을 경우 아래 사항을 확인 하시기 바랍니다. 1. 고정 요소에 top, left 값이 있는지 확인 (가로 스크롤의 경우 bottom, right) 2. 고정 요소 위 부모 요소에 overflow 값이 hidden, scroll 또는 auto로 설정된 경우 부모 요소가 display: flex일 경우, 세로 정렬 align-items: flex-start 값이 필요합니다. 이유는 flex박스의 align-items은 기본 값으로 stretch로 되어 있어 고정 요소가 컨테이너의 전체 높이를 차지하기 때문에 고정 되지 않습니다. 사용예시 .container..

작업 일지/HTML CSS 2024.03.08
이전
1
다음
더보기
프로필사진

OK DDODDO LAB

AI랑 퍼블리싱 하는 실험 블로그

  • 분류 전체보기 (51) N
    • 퍼블리셔 AI (11) N
      • 퍼블리셔 자동화 (3) N
      • 접근성(A11y) × 마크업 (3) N
      • ChatGPT 실무 사례 (5) N
      • 디자인 & 시안 연계 (0)
    • 작업 일지 (39)
      • IT (3)
      • HTML CSS (10)
      • JS (11)
      • 기초셋팅 (2)
      • 웹접근성 (6)
      • 이슈기록 (7)

Tag

반복작업줄이기, figma없이디자인, 웹접근성, ChatGPT, 웹퍼블리셔, 프롬프트디자인, CSS, gpt실무활용, tailwindcss, ai와이어프레임, 퍼블리셔자동화, jQuery, uiux자동화, gpt마크업, html자동화, 디자인자동화, chatgpt디자인, gpt디자인, vuejs, JS,

최근글과 인기글

  • 최근글
  • 인기글

최근댓글

Calendar

«   2025/06   »
일 월 화 수 목 금 토
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30

Archives

Copyright ©

티스토리툴바