정의
position이란 글의 흐름과 상관없이 배치하고 싶을 때 사용하는 속성으로 속성의 종류를 먼저 지정해주고 구체적인 위치를 top, right, bottom, left를 사용하여 지정해준다.
Position 속성종류
1. static
기본값으로 모든 태그들은 따로 position 속성값을 주지 않으면 static 값을 가진다.
2. relative
원래 자신이 있어야할 위치를 기준으로 이동하고 원래있던 공간은 비워놓음.
postion: relative;를 주고 left: 50px;을 하면 원래 있던 자리에서 왼쪽에서 50만큼 떨어진 자리에 위치하게된다.
3. absolute
가장 가까운 포지셔닝이 된 조상 요소를 기준으로 위치를 지정한다.
그러니깐 가장 가까운 상위태그들 중에서 position이 static이 아닌 다른 속성으로 선언된 조상을 기준으로 위치를 옮긴다는 말이다.
absolute는 너비를 지정해주지 않으면 텍스트 내용만큼 너비가 지정되기에 너비를 꼭 지정해줘야한다. 또한 원래있던 자리에서 벗어나기에 자리를 차지하지 않는다.
1. 가까운 포지셔닝이 green일 때
(0.5x 크기로 봐주세요)
위에 코드를 설명하자면 각자의 클래스명 대로 상자색깔과 크기가 설정되어 있는 상태이다.
여기서 green클래스에 <position: relative>를 선언하고 blue클래스에는 <position: absolute>와
<right: 30px;> <bottom: 60px;>을 선언하여 적용하였다.
blue클래스의 조상인 green이 포지셔닝이 바뀌었기 때문에 green을 기준으로 해서 위치를 옮기게 된 것이다.2. 가까운 포지셔닝이 red일 때
(0.5x 크기로 봐주세요)
1과 같은 코드인데 <position: relative> 속성을 green클래스말고 red클래스에 적어주면
조상태그중 포지셔닝이 바뀐 태그는 red클래스이기 떄문에 red클래스를 기준으로 속성이 바뀌게 된다.4. fixed
fixed는 브라우저화면을 기준으로 위치를 지정한다.
스크롤을 올리거나 내려도 고정되어 움직이지 않는 속성이며 원래있던 자리에서 완전히 벗어나기에 자리를 차지하지 않는다. 너비를 꼭 지정해줘야한다. (width: 100%)
(0.25x 크기로 봐주세요)
5. sticky
지정한 위치까지는 static포지션으로 있다가 스크롤을 내릴때 지정한 위치가 되면 그때부터 fixed처럼 위치가 고정이 된다. 원래 있던 공간을 차지한다.
(0.25x 크기로 봐주세요)
sticky속성은 부모요소에 소속이 되기 때문에 부모요소가 화면밖으로 사라지면 같이 사라진다.
(0.25x 크기로 봐주세요)
z-index
글의 앞뒤 순서를 정하는 속성으로 코드를 나중에 적을 수록 화면에서는 앞쪽으로 보이게 되는데 이 속성을 사용하면 앞뒤 순서를 조절할 수 있다.
(0.25x 크기로 봐주세요)
위의 코드는 red클래스보다 blue클래스를 나중에 적었기 때문에 스크롤을 내리면 파란색깔 박스가 위로 오게 되어 있다.
CSS파일에 들어가서 .red클래스에 z-index주석을 풀고 다시 결과를 보게 되면 파란색박스가 뒤로가게 된다.
