요소를 배치하는 position

Joah·2022년 5월 23일
0

CSS

목록 보기
1/8

position 배치

'요소를 원하는 위치에 배치하고 싶을 때 사용하는 속성'

position을 사용하기 위해서는 먼저 해당 요소를 배치할 기준이 필요하다.

  • static: 기본값 (요소는 기본적으로 배치를 할 수 없는 상태_기준 없음)
  • relative: 요소 자기 자신을 기준
  • absolute: 위치 상 부모 요소를 기준
  • fixed: 뷰포트(브라우저)를 기준
  • sticky: 스크롤 영역 기준

position: relative;

position: relative;

'요소 자신을 기준으로 배치한다.'

위의 2번 박스에 relative 값을 명시해도 relative 값을 명시하기 전과 똑같은 결과를 출력하는데....

이렇게 위치 값인 속성 left와 top을 부여하면 원래 있던 자리에서 왼쪽으로부터 200px만큼, 위로부터 30px씩 이동한 '2'번 박스를 볼 수 있다.

📢하지만
'1'번 박스와 '3'번 박스의 사이에 아직 '2'번 박스의 공간이 남아있다.
1번과 3번이 쌓인 구조가 아닌 공중에 붕 떠있는 구조로 되어 있기 때문에 이것은 비정상적인 출력결과로 간주한다. 정상적인 출력 구조라면 1번과 3번 사이에는 공간이 없어야 한다.
따라서
옮겨진 2번 박스는 허상이고 실제로는 옮기기 전의, 원래의 위치에 있다.

결과적으로
relative 값을 활용한 배치는 실제로 잘 사용되지 않는다고 한다.

그럼 언제 사용될까?
absolute 값을 가지는 하위 요소가 구조 상의 부모 요소에 위치 상의 부모 요소가 될 수 있도록 position: relative; 값을 부여하는 용도로 쓰인다.

무슨 말이야....?
position: absolute;의 개념을 알면 더 쉽게 이해할 수 있다.

반대로📢
position: relative;가 명시되어 있다면, 그 요소의 자식, 후손 요소에 position: absolute;를 통해서 무엇인가가 배치되고 있다고 유추할 수 있다.**


Position: absolute;

position: absolute;

'위치 상 부모 요소를 기준으로 배치한다'

2번 박스에 absolute값을 부여하니 2번 박스가 공중으로 붕 뜨면서 1번 박스와 3번 박스가 붙어있는 것을 볼 수 있다.

이는 2번 박스 자신이 배치될 위치를 부모 요소를 기준으로 지정하였기 때문에 더 이상 1번 박스와 3번 박스와의 상호작용을 하지 않는다.

결과적으로
position: absolute;를 부여하면 속성이 부여된 요소는 주변 요소와의 상호 작용이 무너지며 부모 요소를 기준으로 배치된다.

이때 position:relative 값을 부모 요소에 명시한다.

파란색 박스는 박스 1,2,3의 위치 상 부모요소이다.
즉, 2번 박스에 작성된 아래의 코드로 인해

position: absolute;
top: 30px;
left: 30px;

"2번 박스는 relative가 선언된 요소를 기준으로 위로부터 30px, 왼쪽으로부터 30px 배치된다."
파란 박스에 relative 값을 명시하여

position: relative;

2번 박스가 배치될 기준을 지정한다.

예시]


박스 1,2,3에게 파란 박스는 부모 요소, 보라 박스는 상위 요소이다.

2번 박스에 position: absolute; 값이 부여됐다.

브라우저의 행동

  • 2번 박스를 relative값이 있는 요소를 기준으로 배치해야 하니깐 바로 위의 부모 요소부터 relative 값이 있는지 확인한다.

  • 파란 박스에는 position: static; 즉, '기준 없음'이 설정되어 있다. relative가 아니니 브라우저는 그 위의 부모 요소 즉, 상위 요소를 해석하려고 시도한다. 이때 보라색 박스를 확인하니 position:relative값이 부여되어 있는 것을 확인한다.

  • 결과적으로 2번 박스는 상위 요소인 보라색 박스를 기준으로 아래로부터 30px, 오른쪽으로부터 30px의 위치에 배치된다.

  • 만약 부모 요소, 조상 요소 모두 position: static; 값을 가지고 있다면, 부모로 올라가고 또 올라갔는데 HTML까지 올라갔는데 기준이 안된다고 판단할 때, 이는 뷰포트를 기준으로 아이템을 배치하게 된다.

💡
특정 요소에 position: absolute;를 통해서 배치를 하기 시작했다면, 그 해당하는 요소의 구조 상의 부모 요소에 position: relative;값이 있어야 한다.


Position: fixed;

'처음부터 뷰포트(viewport)를 기준으로 배치한다.'


부모나 상위 요소에 아무리 position: relative; 값이 있어도 애초에 뷰포트를 기준으로 배치된다.

  • 부모 요소와 조상 요소 모두 position: relative; 값이 있기 때문에 2번 박스는 1,3번 박스와 더 이상 상호작용 하지 않는다.
  • position: fixed;를 사용하면 해당 요소는 스크롤을 내려도 항상 그 자리에 고정되어 있다.

💡 상단 바를 적용할 때 사용한다. 스크롤을 내려도 해당 요소는 화면의 고정된 위치에 있음


요소 쌓임 순서(stack order)

어떤 요소가 사용자와 더 가깝게 있는지, 사용자의 눈과 가까운지(위에 쌓이는지) 결정

1. 요소에 position 속성의 값이 있는 경우 위에 쌓임(기본값 static제외)

⇒ position: absolute; position: fixed; 가 있는 경우

2. 1번 조건이 같은 경우, z-index 속성의 숫자 값이 높을 수록 위에 쌓임

⇒ 요소 모두 position의 속성을 가지고 있을 경우 z-index 속성 숫자 값을 확인한다

3. 1번과 2번 조건까지 같은 경우, HTML의 다음 구조일 수록 위에 쌓임

⇒ HTML에서 나중에 작성될 수록 위에, 사용자의 눈에 더 가깝게 쌓인다.

z-index

요소 쌓임 정도를 지정

auto: 부모 요소와 동일한 쌓임 정도
숫자: 숫자가 높을 수록 위에 쌓임. 음수도 사용 가능하지만 일반 요소보다 더 뒤에 쓰고 싶을 때 최대 -1 정도를 사용한다. -2부터는 잘 사용하지 않는다.

top, bottom, left, right

position과 같이 사용하는 CSS 속성들(양수 음수 모두 사용할 수 있다)

요소의 각 방향별 거리 지정

auto: 브라우저가 계산. 0이라고 생각하면 됨
단위: px, em, rem 등 단위로 지정

요소의 display가 변경됨

position 속성의 값으로 absolute fixed가 지정된 요소는, display 속성이 block으로 변경된다

profile
Front-end Developer

0개의 댓글