CSS position - 2차원과 3차원을 결정짓는 요소

웹사이트의 차원

• 1차원 - 선
• 2차원 - 면
• 3차원 - 공간

웹사이트는 2차원 + 3차원 이다

층이 있는 형태 → 3차원

웹사이트의 레이어(층)의 유무 → position속성 

 

2차원과 3차원 속성들

• 부모 자식간 마진 병합 현상이 있다 → 2차원
• 자식의 높이 값이 부모의 높이 값에 영향을 준다 → 2차원 (부모가 높이 값을 가지지 않았을 경우)
• 3차원 → top, bottom, left, right의 속성 값을 갖는다

** position 속성이 들어간 태그가 3차원의 영역으로 들어간다

 

relative는 위의 3가지 특징을 모두 가지고있다

→ 마진 병합 현상이 있기 때문에 기존 영역을 기준으로 

 

absolute는 3차원으로 화면 전체 영역에서 자유롭게 위치 선정 가능

fixed는 화면 특정 위치에 영역을 고정시킬 때 사용

 

** 마진 병합 현상

.static_parent {

  width: 300px;
  height: 300px;
  background-color: pink;
}

.static_child {

  position:static;

  width: 100px;
  height: 100px;
  background-color: gray;

  margin-top:100px;
}

- position: static; 의 경우 자식에만 margin-top을 주었으나 병합되어 움직임

 

모든 html 태그는 기본 값으로 position: static; 을 가지고 있다

 

 

 

** 부모의 높이 값이 없을 경우 자식의 높이를 사용

  .static_parent {
 
          width: 300px;
          /* height: 300px; */
          background-color: pink;
      }

      .static_child {
      
          position:static;
          
          width: 100px;
          height: 100px;
          background-color: gray;
      }

 

 

 

relative의 top

• static의 경우 browser를 기준으로 적용
• rerative의 경우 기존 위치를 기준으로 적용됨

  .static_parent {
 
          width: 300px;
          height: 300px;
          background-color: pink;
      }

      .static_child {
      
          position:relative;
          
          width: 100px;
          height: 100px;
          background-color: gray;
          
          top:100px;
      }

 

position: sticky;

sticky 요소들은 static 요소들과 같이 움직이지만

스크롤이 임계점에 달하면 fixed 요소들과 같이 박스를 화면의 같은 자리에 고정할 수 있다.