[CSS] #Position 사용법

#Position 사용법

---

 

 

Position 속성 사용법은 다음과 같다.

 

position: static | relative | absolute | fixed | sticky

 

 

 Static 을 제외한 나머지 속성값들은 top,left,bottom,right 와 같이 어느 위치에 요소를 위치시킬건지 지정할 수 있다.

각 값들은 그 방향에서 얼마나 이동시켜 위치할 것인지를 나타낸다. 

 

 

Static

Static은 position 속성의 기본값이다. 요소를 나열한 순서대로 배치하며, top,right,bottom,left와 같은 속성을 사용할 수 없다. (Float 속성은 가능)

 

 

 

 

relative

static이었을 때 배치되는 위치를 기준으로 상대적 위치를 지정할 수 있는 속성값이다. 예를 들어 static이였을 때

위치해있는 기준이 제일 왼쪽 상단에 있었다면, style= bottom:5px; right:5px; 속성을 부여할 경우 왼쪽 상단에서

bottom:5px; right:5px; 이동하게 된다. 

 

 

 

static  예제

 

• 위에 명시적으로  position 속성을 써서 나타내지는 않았지만  position: static속성이라고 보면 된다.
• static 속성은 브라우저에서 ㅈ자연스럽게 해당 요소들의 위치를 결정한다. 보통 display 속성에 따라 배치가 결정된다.
• 위의 요소들은 dsplay: line-block에 따라 왼쪽에서 오른쪽으로 요소의 위치가 결정된걸 볼 수 있다.

 

 

 

 

• 위에 static 예제 코드에서 position: relative로 변경을 줬더니 위치가 겹쳐지는 것을 확인할 수 있다.
• static과는 다르게 relative는 static이엇을 때의 위치를 기준으로 상대적인 요소의 위치를 결정한다.

 

 

absolute

absolute속성값은 브라우저가 문서의 흐름과 상관없이 left,right,top,bottom 속성값을 이용하여 요소 를 위치시킨다.

이때 처음 시작위치는 가장 가까운 부모 요소 혹은 조상 요소 중 position 속성이 relative인 요소이다.

 

 

 

 

fixed

fixed 속성값은 absolte속성값과 마찬가지로 문서의 흐름과 상관없이 위치를 좌표로 결정한다. 하지만 position:relative인

제일 가까운 부모 혹은 조상 요소가 아닌 브라우저 창이 기준이 된다. (기준점:브라우저 왼쪽 위 최상단)

 

 

 

 

sticky

sitkcky 속 성은 기준점 이상을 넘지 않을 때는 relative 포지션처럼 동작하다, 그 이상을 넘게 될 때에는 fixed속성과 같이 동작한다. 그러다가 스크롤이 scroll박스 밖으로 벗어나게 될 경우에는 그 위치에서 정지하게 된다.