CSS 속성(position, z-index)

position 속성

: HTML 요소의 위치를 결정

• static: 정적 위치 지정 방식(기본값)

      static 상태에선 요소에 왼쪽, 오른쪽 값을 주어도 위치가 변경되지 않음

• relative: 상대 위치 지정 방식

      원 위치를 기준으로 상대적으로 요소의 위치가 지정됨

• absolute: 절대 위치 지정 방식

      relative 속성을 가진 부모태그의 위치를 기준삼아 상대적으로 요소의 위치가 지정됨

      부모태그가 없을 땐 body태그를 기준으로 함

• fixed: 고정 위치 지정 방식, 고정값

      화면을 기준으로 위치가 지정됨

 

 

 

z-index 속성

: 겹쳐지는 요소들이 쌓이는 스택(stack)의 순서를 정함

▼ stack이란?

데이터를 차곡차곡 쌓아 올린 형태의 자료구조, 데이터가 순서대로 쌓이며 가장 마지막에 삽입된 자료가 가장 먼저 삭제되는 구조를 가지고 있음

# z-index의 기본값: auto('0'이 아님!)

#  z-index 순서 기준: 더 늦게 호출된 코드(마지막에 적힌 코드)가 더 위로 순서가 배열이 됨

#  z-index의 순서는 부모태그가 기준이 됨

  - 부모의 값이 10이고 자식의 값이 20일 경우, 부모의 값인 10으로 순서가 적용됨

# z-index 값을 지정하기 위해서는 해당 요소의 속성이 relative, absolute, fixed 중 하나여야 함

# z-index의 값은 같은 depth(깊이)의 요소끼리 비교하는 것이 원칙임

    - 형제 태그 간에 값을 비교하여 순서의 상하를 결정함

div {
    width       : 200px;
    height      : 200px;
}
#first {
    position    : relative; 
    z-index     : 30;
    background-color  : red;
}
#second {
    position    : relative; 
    z-index     : 20;
    margin-top  : -100px;
    background-color  : blue;
}
#third {
    position    : relative;
    text-align: right;
    z-index     : 50;
    margin-top  : -100px;
    margin-left : 100px;
    background-color  : green;
}

---
<div id="first">                   //첫 번째
    1st Box
</div>
<div id="second">                  //세 번째
    2nd Box 
    <div id="third">3rd Box</div>  //두 번째
</div>