[CSS] position

position이란?

이름 그대로 태그들의 위치를 결정하는 속성이다

position을 이용하면 텍스트나 이미지들을 원하는 위치로 배치할 수 있다

 

포지션 속성 사용법은 다음과 같다

//css
position: static | relative | absolute | fixed | sticky

5가지 방법이 있다고 생각하면 된다

 

 

그냥 간단하게 뭐를 기준으로 top, bottom, left 등으로 움직일꺼?

냐고 물어봤을 때 그 기준이 방법 이라고 생각하면 된다

 

 

 

 

 

position 속성 설명

position : static; //기준이 없다~ 좌표적용 안됨
position : relative; //기준이 내 원래 위치다 == 기준이 body이다
position : absolute; // 기준이 내 부모인데 부모에 relative 포지션 달아줘 응애
position : fixed; //기준이 내 브라우저 창이다
position : sticky; //기준이 스크롤 박스이다

 

 

 

 

음 추가로 만약 이렇게 포지션을 이용하여 박스를 이동시킬때

박스는 padding과 border를 고려하지 않는데

 

쉽게 말해 width를 주게 되면 padding 안쪽 부분만 실제 width로 설정한다

위 그림의 파란색 부분만 실제 width라는 겨

그래서 박스의 설정을 해줘야한다 

.box{
	box-sizing : border-box; //박스의 폭은 border까지 포함
}

위와 같이 설정해주면 border까지 실제 박스의 폭으로 설장해준다

 

이런 속성은 모든 웹사이트를 만들 때 유용하기 때문에 css파일을 만들때 맨 위에 정의하고 시작하는게 좋다