카테고리 없음

css- position 속성

CODE_PLAN 2022. 7. 19. 17:05

position 사용법 

 

position 속성 사용법은 다음과 같습니다.

 

position: static | relative | absolute | fixed | sticky

 

 static  요소를 문서 흐름에 맞추어 배치.
 relative  이전 요소(주로 부모 요소)에 자연스럽게 연결하여 위치를 지정.
 absolute  원하는 위치를 지정해 배치. 
 fixed  지정한 위치에 고정하여 배치.
 sticky  위치에 따라서 동작방식이 달라짐. 요소가 임계점(scroll 박스 기준) 이전에   는 relative와 같이 동작. 그 이후에는 fixed와 같이 동작.

 

static을 제외한 나머지 속성값들은 top, left, bottom, right 와 같이 어느 위치에 요소를 위치시킬 건지 지정할 수 있습니다. 각 값들은 그 방향에서 얼마만큼 떨어져 위치시킬 것인 지를 나타냅니다. 예로들어 top: 15px 면 기준위치 위에서 15px 떨어져 있는 곳에 위치시키라는 뜻입니다.

출처: https://engkimbs.tistory.com/922 [새로비:티스토리]