[TIL] 2023.09.07 - overflow: hidden 부분 적용 방법(position: fixed)

 position: fixed 

• 상위 요소에 영향을 받지 않아 고정된 위치 설정 가능
• 스크롤과 상관없이 항상 화면에 보임
• 위치를 지정하기 위해 top, right, bottom, left 속성을 사용하여 원하는 위치로 이동시킬 수 있음
• 예시
  - Slectwrap의 overflow: hidden;이 DropDiv2에만 적용됨.
  - DropDiv1은 position: fixed; 적용으로 영향받지 않음

// styled components

const Slectwrap = styled.div`
  border: 2px solid lightgray;
  height: 220px;
  margin: 40px 5px 5px 5px;
  padding: 0px 3px;
  position: relative;
  overflow: hidden;
`

const DropDiv1 = styled.ul`
  background-color: white;
  border: 1px solid #e8e8e8;
  width: 250px;
  border-radius: 15px;
  padding-left: 0; // 들여쓰기 제거
  margin-right: 5px;
  left: 17px; // 위치조정
  top: 646px;
  // position:fixed(부모 오버플로를 무시하게 함)
  position: fixed;
`

const DropDiv2 = styled.ul`
  background-color: white;
  border: 1px solid #e8e8e8;
  width: 250px;
  border-radius: 15px;
  padding-left: 0; // 들여쓰기 제거
  margin-right: 5px;
  left: 258px; // 위치조정
  top: 125px;
  position: absolute;
  `