CSS position과 좌표 레이아웃

1. 좌표속성

• top, left, bottom, right 라는 속성을 사용하면 요소의 상하좌우 위치를 변경할 수 있습니다. 
• 하지만 이 좌표속성을 사용하려면 position 속성이 필요합니다. 
  • position 속성은 좌표속성을 적용할 기준점이 지정해주는 역할

.box {
  top : 20px;
  left : 30%;
}

 

 

2. position 속성

• static;  : 기준이 없는 상태
• relative; : 기준이 본인 원래 위치
• absolute; : 기준이 부모 속성
• fixed; : 기준이 브라우저창
  
  • 브라우저 창에 고정된 위치(스크롤시 따라옴 ex) 다음페이지, 이전페이지, 위로 스크롤 버튼)

.box {
  position : static;
  position : relative;
  position : absolute;
  position : fixed;
}

 

 

- position : absolute 를 적용한 요소 가운데 정렬을 위한 코드

.button {
  position : absolute; 
  left : 0;
  right : 0; 
  margin-left : auto;
  margin-right : auto;
  width : 원하는 수치
}