웹 프로그래밍 css (32) position

코린이서현이·2023년 7월 11일

웹프로그래밍

목록 보기

42/46

요소의 레이아웃을 설정하는 대표적인 속성인 position에 대해서 알아보자.
position은 요소를 원하는 위치로 이동할 수 있게 한다.

📒 속성값에는 static, absolute, fixed, relative, sticky이 있으며 각 속성 별로 offset을 가지고 위치를 조정할 수 있다.

top: 40px; 
right: 0px;

🔸규칙

top과 bottom을 동시지정
👉 top값 우선적용
left과 right을 동시지정
👉 ltr(영어, 한국어 등)이면 left를 우선 적용 /
rtl(페르시아어, 아랍어, 히브리어 등)이면 right를 우선 적용

👉 각 position별로 특징을 알아보자.

position: static;

👉 offset 값을 지정했는데 적용이 되지 않는다면, position을 지정하지 않았는지 살펴봐야한다.

position: relative;
top: 40px; left: 40px;

🔸특징
1. Normal -flow의 흐름에 따른다.
2. 주변 요소는 원래 요소의 자리를 남겨두고 배치된다. 따라서 주변 배치에 영향을 주지 않는다.
3. 부모의 position 속성에 영향을 받지 않는다.

부모 요소의 padding 바깥쪽을 기준으로 offset값에 따라 배치된다.
단, 부모가 기본값이 아닌 position값을 가지고 있어여한다.

position: absolute;
top: 20px; left: 210px;

🔸특징
1. Normal-flow의 흐름에서 벗어난다.
2. 페이지 레이아웃에 공간도 배정하지 않습니다.
3. 해당 요소가 display : 블록으로 바뀌면서, 블록관련 요소를 선언할 수 있게 된다.

position: fixed;
top: 20px; left: 210px;

🔸특징
1. 부모의 위치에 영향을 받지 않는다.
2. 주변 요소에 별다른 영역을 주지 않는다.

👏 페이지에 문의하기, 상단으로 올라가기 버튼등에 활용할 수 있다.

일단 relative로 배치하고, 임계점을 넘으면 fixed처럼 화면에 고정된다.
스크롤이 scroll 박스 밖으로 벗어나게 될 경우에는 그 위치에서 정지하게 됩니다.
기준점을 설명하자면 top:50px인 sticky 속성을 예로 들어 보겠습니다. 스크롤를 내렸을 때 뷰포트(viewport)와 요소 사이의 거리가 50px 이상이면 relative처럼 동작하다 50px 이하가 됬을 때 기준점을 넘은 것으로 보고 그때부터 fixed 요소처럼 동작하게 됩니다. 뷰포트(viewport)는 현재 사용자에게 보이는 브라우저 창이라고 생각하시면 됩니다.

position: sticky;
top: -30px;

scroll 박스는 overflow 속성이 존재하는 부모요소를 뜻합니다. 여기서 부모요소가 overflow를 특별히 명시하지 않았다면 부모요소가 바로 scroll 박스가 됩니다!
만일, scroll 박스 사이에 overflow: hidden 이 적용되있는 요소가 있을 경우에는 sticky 속성이 제대로 동작하지 않으므로 주의해야 합니다.
scroll박스
아직 지원하는 브라우저가 많이 없다고 함.

오늘도 한 개념을 배워서 뿌듯하당.

24년도까지 프로젝트 두개를 마치고 25년에는 개발 팀장을 할 수 있는 실력이 되자!