Positiont 속성 - relative, absolute, fixed를 알아보자.

그때 그 시절 기억하고 싶어서 작성했습니다.
글을 읽는데 있어서 어려움이 있을수 있습니다.

position 속성은 웹 문서 안 요소로를 어떻게 배치할지 정하는 속성입니다. position 속성을 이용하면 텍스트 및 이미지를 원하는 위치로 배치할수 있고 어디다가 놓을지 결정을 할수 있습니다.

position 사용법중에는

relative, absolute, fixed가 있습니다.

1. relative 는 이전 요소(주로 부모 요소)에 자연스럽게 연결하여 위치를 지정할수 있습니다.
2. absolute는 원하는 위치에 지정해서 배치할수 있습니다.
3. fixed는 지정한 위치에 고정하여 배치합니다.

이렇게 top, lefr, right, bottom와 같이 어느 위치에 요소를 위치할것인지 지정할수 있는데요. 각 값들은 지정하는 방향에서 얼마만큼 떨어져서 위치할것인지를 나타낸다고 생각하면 되겠습니다.

relative

div1 {
background-color : green;
top : 10px;
left : 10px;
}
div2 {
background-color : black
top : 10px;
left : 10px;
}
div3 {
background-color : red;
top : 10px;
left : 10px;
}

style="top:10px; left: 10px;" 을 적용하면 왼쪽으로부터 10px, 위쪽으로부터 10px 이동하는 형식입니다. 상대적 위치는 top, right, bottom, left 속성을 써서 나타낼 수 있습니다.

absolute

div1{
width : 10px;
height:10px;
background-color : yellow;
}
div2 {
width : 10px;
height : 10px;
background-color : red;
position : absolute;

absolute 속성값은 브라우저가 문서의 흐름과 상관없이 요소를 수직으로 놓을지, 수평으로 놓을지 등을 결정하는 것으로 left, right, top, bottom 속성값을 이용하여 요소를 위치시키는 속성값입니다.

fixed

fixed 속성값은 absolute 속성값과 마찬가지로 문서의 흐름과 상관없이 위치를 좌표로 결정합니다. 하지만 position:relative인 제일 가까운 부모 혹은 조상 요소가 아닌 브라우저 창이 기준이 됩니다. 따라서 브라우저 창을 어디로 스크롤 하더라도 계속 고정되어 표시되게 됩니다.