css_z-index, overflow

z-index

• 겹치는 상황에서 사용함
• 요소의 쌓임 순서를 정의
• 정수 값을 지정하여 쌓임 맥락(stacking context)에서의 레벨을 정의하는 방식으로 적용
• position 때문에 요소가 겹칠 때 사용하는 속성
• 위치 지정 요소에 대해 적용할 수 있는 속성
  - 위치 지정요소(positioned element) : position 속성이 정의되어 있는 요소
  
  
  

z-index 값이 적용될 때

• 상대적으로 높은 값을 가질 수록 위쪽에 표현됨
• 값을 상대적으로 비교하여 높은 값이 위에 표현(겹치는 요소 중)

  div{background-color: green; bottom: 50px; z-index: 3;}

  
  

overflow

• 요소의 크기가 정해져 있는 상태에서 내부 콘텐츠 크기가 요소보다 커지면 콘텐츠가 요소 영역 밖으로 벗어남
• 이것이 overflow, 넘침 현상
• 이러한 문제를 해결하기 위하여 overflow 속성 사용
• 속성 값 :
  - visible(기본값)
  • hidden : 영역을 벗어나면 잘라내서 보이지 않게 함
  • scroll : 영역을 벗어나면 잘라내서 보이지 않게 하고 잘려진 콘텐츠 진행 방향으로 스크롤 만듦
  • auto : 웹 브라우저의 설정 값 따름(desktop 브라우저는 주로 scroll 처리)
    - auto의 특징: scroll과의 차이; 스크롤 하지 않을 때도 overflow 상태에서 스크롤 바가 보임

    overflow: scroll;