TIL -04. CSS 레이아웃: position 속성

css 레이아웃 첫번째 공부를 해보겠습니다.

• 먼저, position속성은 요소에 사용되는 위치 결정 방법 유형으로 정적이고(static), 상대적이고(relative), 고정적(fixed), 절대적인 것(absolute),끈질긴 것(sticky)들을 지정합니다.

position 프로퍼티를 사용하면 무엇이 좋은가?
html 코드와 상관없이 그리고 싶은 어느 위치에서나 요소를 그릴 수 있습니다.

결정 유형 방법들은 다섯가지 정도 있는데.

• static
• relative
• fixed
• absolute
• sticky

저는 다음 3가지 속성에 대해서를 공부하겠습니다.

레이아웃 position 속성: relative, absolute,fixed

왜냐면, static은 거의 사용하지 않기 때문에 생략합니다.

1. relative

div.relative{
	position:relative;
}

• 상대적으로 배치 된 요소의 위쪽, 오른쪽, 아래쪽 및 왼쪽 속성을 설정시
  일반 위치에서 멀어 지도록 조정
• 다른 내용은 요소가 남긴 간격에 맞게 조정되지 않음

2.absolute

div.relative {
	position: relative;  //조상
}
div.absolute{
	position:absolute; //자손
}

• 가장 가까운 위치를 조상을 기준으로 요소가 배치
• 단, 절대 위치 요소에 위치 된 조상이 없으면 문서 본문을 사용하고 페이지 스크롤과 함꼐 이동

3.fixed

div.fixed {
  position: fixed;
 }

• 페이지가 스크롤 되더라도 항상 동일한 위치에 유지된다.
• top,right,bottom,left속성은 요소를 배치하는 데 사용
• 고정된 요소는 일반적으로 위치했던 페이지에 공백을 남기지 않는다.