방구석 개발자의 놀이터

  • 홈
  • 태그
  • 방명록

Auto 1

[CSS] overflow-y : auto 와 overflow-x : visible 같이 써야할 때

1. 배경 설명 위와 같이 사이드바가 있다고 가정해보자. 사이드바 전체 영역에 overflow-y:auto 가 걸려있고 그 안에 메뉴 영역에 마우스를 올렸을 때 툴팁이 띄워지는 구조를 만들 때 아래와 같은 스타일 문제(?)를 마주칠 수 있다. 사이드바 전체 영역의 overflow-y:auto로 인해 툴팁이 가려지게된다. 이 때 overflow-y:auto 와 overflow-x:visible을 같이 쓰려고 하지만 W3C 공식 문서에 보면 둘은 같이 적용할 수 없게된다. 한쪽이 auto or scroll일 경우 나머지 한쪽이 visible을 하면 visible -> auto 로 취급된다. 2. 해결 방안 기존의 사이드바 영역을 초록색 div로 한번 더 감싼다. (즉, 사이드에 parent div를 추가) ..

Front-End/CSS 2023.01.22
이전
1
다음
더보기
프로필사진

게으른 사람들에게 편리함을 제공해 줄 수 있을 때 가장 기쁜 개발자

250x250
  • 분류 전체보기 (102)
    • JAVA (2)
    • Spring (17)
    • Python (14)
    • 회고록 (4)
    • Flutter (3)
    • Git (1)
    • Spring Boot (15)
    • Algorithm (3)
    • AWS (1)
    • Front-End (34)
      • HTML (1)
      • CSS (1)
      • SCSS (2)
      • JavaScript (12)
      • React (13)
      • React-query (1)
      • NextJS (0)
      • Test (1)
    • OpenSource (3)
    • 독서 (0)
    • 강의 (1)
    • Error (4)

Tag

springframework, 개발자, aspect, 회고록, component, springboot, javascript, react, CSS, frontend, react-router-dom, 프론트엔드, flutter, front-end, lombok, es6, opensource, spring boot, PYTHON, spring,

최근글과 인기글

  • 최근글
  • 인기글

최근댓글

공지사항

페이스북 트위터 플러그인

  • Facebook
  • Twitter

Archives

Calendar

«   2025/05   »
일 월 화 수 목 금 토
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 31

방문자수Total

  • Today :
  • Yesterday :

Copyright © Kakao Corp. All rights reserved.

티스토리툴바