포지셔닝 요소 알아보기

포지셔닝 요소(positioning element)

이전 글에서 언급하진 않았지만 배경에 이미지를 추가하고 앞의 팝업 상자를 중앙으로 이동시키려 했지만 실패했다. 이번에는 그걸 가능하게 해주는 포지셔닝 요소(positioning element)에 대해 알아볼 것이다.

일반적으로 요소들은 html파일에서 작성된 순서대로 존재한다. 플렉스 박스 등으로 바꿀 수도 있지만 일반적인 문서 흐름(documnet flow)에서는 그렇다. Element 2를 다르게 위치시켜 볼건데, 몇가지 선택지가 있다. 하나는 문서 흐름이라고 불리는 것에서 위치를 바꿔주는 것이다. 문서 흐름은 HTML에서 사전 정의된 요소의 순서를 말한다. 예를 들어, 먼저 작성된 블록 요소는 위에, 나중에 작성된 블록 요소는 아래에 위치하고 이것을 절대 바꿀 수 없다는 것이다. 하지만 CSS 속성을 추가하는 것으로 순서를 바꿀 수 있다.

추가할 것은 position 속성인데, 따로 설정하지 않았을 때의 변수는 static이다. 여기서 현재 위치를 기준으로 위쪽으로의 거리를 바꾸는 top(bottom, left, right) 속성을 추가하면 어떻게 될까? 결론은 "위치가 변하지 않는다" 이다. position 속성이 static으로 설정되어 위치가 고정된 상태기 때문이다. 변수를 relative으로 바꿔준다면 위치의 변화가 생긴다.

위의 이미지는 처음의 이미지에서 Element2에 position: relative;와 top: 20px;를 적용한 모습이다. Element2에 위쪽에 대한 거리가 늘어가 밑으로 조금 이동한 것을 볼 수 있다. 하지만 Element2도 여전히 문서의 흐름 안에 있는 것을 알 수 있는데, Element2가 밑으로 조금 내려갔지만 Element1과 Element3가 여전히 같은 위치에 있는걸 보면 된다.

position: static;은 요소를 문서 흐름에 유지시켜서 상하좌우로 위치를 바꿀 수 없게 하고, position: relatice;는 요소들을 여전히 문서 흐름에 유지시켜서 위치가 바뀌지 않은 것처럼 보이게 하지만 요소를 상하좌우로 이동시킬 수 있다.

위의 이미지는 이전 글의 코드에 position: relative;와 top: 200px;를 추가한 모습이다. 물론, 시각적으로 그리 훌륭한 모습은 아니지만, 의도대로 팝업 상자를 아래로 움직였다.

이제 position 속성의 다른 변수를 알아보자. 바로 absolute 값이다.

신기하게도 요소들의 순서는 바뀌지 않았지만, Element2가 마치 인라인 요소처럼 Element3의 앞으로 이동했다. 하지만 핵심은 이것이 아니라, Element2가 문서 흐름을 벗어났다는 점이다. 이게 무슨 의미냐면, Element2가 인라인 요소처럼 보이지만 사실 다른 요소들에게는 더이상 존재하지 않는다는 것이다.

개발자 도구로 확인해보아도 Element3에게 Element2는 존재하지 않는 것처럼 보여준다. 너비를 Element3가 전부 차지하고 있는 것으로 나타나기 때문이다. 이제 top과 같은 속성을 이용해서 Element2의 위치를 바꾸어 보겠다.

위의 이미지는 top:0;을 적용한 모습인데 이전의 위치에 대해 상대적으로 움직인 것과는 다르게 페이지의 가장 위에 붙어 있는 모습이다.

다른 요소들을 모두 감싸고 있는 html 요소에 margin:50px을 적용하면 위의 이미지처럼 적용되고

Element1~3을 자식으로 가지고 있는 컨테이너에 position:relative를 적용했을 때는 위의 이미지처럼 바뀌었다. 부모 요소에 상대적으로 바뀐 것이다.

 

위의 현상들이 무엇을 의미할까? 일반적으로 요소에 position: absolute를 추가하면 문서 흐름에서 빠져나와서 position: relative가 적용된 첫 번재 선조에 상대적이게 되는 것을 나타낸다.