[html, css] 3. position

position

top, left, bottom, right 속성을 사용하면 요소의 상화좌우 좌표를 변경할 수 있다.

하지만 이 좌표 속성을 사용하려면 position 속성이 필요하다.position 속성은 좌표속성을 적용할 기준점을 지정해주는 역할을 한다.

 

.box {
  position : static; /* 좌표위치 고정(변경 불가) */
  position : relative; /* 요소의 원래 위치 기준 */
  position : absolute; /* 부모요소 기준(부모요소가 position: relative; 값을 가지고 있어야 함 */
  position : fixed; /* 브라우저 창 기준 */
}

 

position: absolute를 적용한 요소 가운데 정렬

.button {
  position : absolute; 
  left : 0;
  right : 0; 
  margin-left : auto;
  margin-right : auto;
  width : 적절한 값 적용;
}

 

position: fixed를 사용한 상단바

.navbar {
  position : fixed; /*위치 고정*/
  top : 0; /*상단에 위치*/
}