<목차>
1. position 속성의 종류
css의flex 에 이어서 추가로 레이아웃을 원하는곳에 배치하기 쉽게 만들어주는 position 을 배우게 되었다.
1. position 속성의 종류
position은 CSS의 속성중하나로 레이아웃을 배치하거나 아이템을 이동시킬때 사용한다. 4면 (상하좌우)
를 기준으로 아이템을 이동시킬 수 있으며 +값 뿐만아니라 - 값도 사용가능하다
다만 방향값이 +일때 명령한 방향으로 이동하는게 아니라 반대쪽방향으로 이동하게된다.
position:static
static은 따로 속성을 부여하지 않아도 상시로 적용되고있는 설정이 불가능한 기본값이다.
1. position:relative
relative은 기존의 위치부터 계산되는 속성이다 즉 static(기본값)과 시작이 같으며 4면(상하좌우)로 속성을 부여하여 이동이 가능하다.(+) 값 뿐만아니라 (-)값도 사용가능하다.
또한 위치를 이동하면서 다른 요소에 영향을 주지 않는다.
top,right,bootom,left
ex) top.right 으로 예시를 들면.
넓이 높이 50px;인 박스에 레드 박스에만 relative 효과를 줘서 top 과 right +25px씩밀어본다면
해당 이미지 처럼 자기자신의 static (기본값) 의 위치에서부터 +값을 사용할수록 해당방향에서 밀어낸다 라는 개념을 가지고 있습니다. 또한 해당방향으로 밀려놔도 같은 자매속성인 파란박스에는 전혀 영향을 받지 않는 속성을 보여줬습니다.
2. position:absolute
absolute 는 기존의 위치가 아닌 부모의 위치를 기준으로 한다. 또한 요소를 일반적인 흐름 문서에서 제외하여 홀로 떠있는 듯한 효과를 가집니다. 똑같은 css 에 relative 만 absolute 로 바꿔서 넣어보면
해당이미지 처럼 박스1읜 absolute 의 효과로 인해 요소의 흐름을 벗어났슴으로 부모가 박스1를 인식하지 못하고
박스2의 요소가 박스1의 요소자리를 대신 차지하여 이동하였습니다.
또 부모의 영역을 기준으로 움직이므로 부모의 크기인 top, right 에서 25px 씩 밀려난 상태임을 알 수있었습니다.
3. position:fixed
fixed 는 absolute 처럼 요소의 일반적인 흐름을 제외하고 뷰포트 를 기준으로 속성값을 준 화면에 고정되어 나타나게 됩니다.
일반적인 흐름을 제외했기에 박스2가 박스1의 자리에 배치되었고 뷰포트를 기준으로 top,right 25px씩 밀었기에 main 박스에 서 한참 벗어나있는 외각에 위치하였습니다. 또한 화면에 고정되기에 스크롤해도 박스1은 쭉 고정된 위치값을 가집니다.
4. position:sticy
sticy 는 부모의 안에서만 요소를 적용 할 수있으며 fixed 처럼 요소의 흐름을 제외하는건 아니지만 부모내 에서만 fixed 처럼 움직이는 효과를 가지고 있습니다. 똑같이 4방향을 기준으로 밀어내기가 가능하지만 부모의 요소를 넘기는 속성은 받지 못하고 고정되는 속성을 가집니다.
1500 px을 가진 box 를 만들어서 sticy 속성을 부여해보면
magin 30으로 인해 top 40px을 주었지만 부모의 시작지점부터 요소가 적용됨으로 10px만큼만 밀렸다. 또한 부모의 요소 밖으로 나갈 수 없기에 right를 40px 이나 주었지만 밀리지 않은 것 을 확인 할 수 있었다.
드레그를 해도 부모의 영역까지는 fixed 처럼 고정되어 움직였지만 부모의 요소밖으로 나오지 못하고 고정되는 속성을 가졌다.