원하는 요소를 내가 원하는 곳에 두려면?
position에 대해 알아봅시다.
html로 코드를 작성하면, 보통은 작성한 코드 순대로 요소들이 나타납니다.
하지만 position 프로퍼티와 그 속성들을 이용하면, 원하는 곳에 원하는 요소들을 배치할 수 있죠.
일반적으로 많이 쓰이는 position의 속성에는 다음과 같은 세 가지가 있습니다.
position: relative;
position: absolute;
position: fixed;
하나하나 어떤 기능을 하는지 알아봅시다.
우선 예시를 봅시다.
<div class="child-1">I'm child 1</div>
<div class="child-2">I'm child 2</div>
<div class="child-3">I'm child 3</div>
2번 박스에 position:relative; 를 적용해보겠습니다.
.child-2 {
position: relative;
}relative는 적용해도 그 즉시 위치가 바뀌거나 하는 것은 아닙니다.
relative 속성 적용 후, top, bottom, left, right 프로퍼티를 주어야 원래 위치에서 그만큼 이동합니다.
.child-2 {
position: relative;
right: 100px;
bottom: 30px;
}
자 보세요. right와 bottom을 주니, 오른쪽에서 100px만큼, 아래쪽에서 30px만큼 이동한 것을 확인할 수 있습니다. 이때 마이너스값을 적용할 수도 있는데, 마이너스값을 적용하면 반대 방향으로 움직이게 됩니다.
그렇다면, position:absolute; 는 무엇일까요?
position:absolute;는 특정 부모를 기준으로 움직이게 해줍니다.
부모 중에 position이 relative, fixed, absolute 하나라도 있으면 그 부모에 대해 절대적으로 움직이게 됩니다.
일반적으로는 기준이 될 부모에게 position: relative; 를 부여합니다.
<div class="parents">
<div class="child-1">I'm child 1</div>
<div class="child-2">I'm child 2</div>
<div class="child-3">I'm child 3</div>
</div>
위와 같이 부모를 만들어 아이들을 감싸 주었습니다.
이제 두 번째 아이에 absolute를 주고 어떻게 되는지 볼까요?
.parents {
position: relative;
}
.child-2 {
position: absolute;
}
앗, 세 번째 아이가 사라졌습니다!
사실은 사라진 것이 아닙니다. 세 번째 아이는 두 번째 아이의 아래에 깔려서 안보이는 거에요. 왜냐하면, 두 번째 아이에게 absolute를 선언한 순간, 두 번째 아이는 이제 부모, 첫 번째, 세 번째 아이와는 전혀 다른 레이어에 존재하게 되었거든요. 두 번째 아이만 위로 똑 떨어져 나온 것이라고 생각하면 됩니다. 이제 두 번째 아이에게도 top, bottom, left, right 프로퍼티를 주고 어디로 이동하는지 볼까요?
.parents {
position: relative;
}
.child-2 {
position: absolute;
right:0;
bottom: 0;
}
두 번째 아이를 저 끝으로 보내버리니, 세 번째 아이가 보입니다.
그보다도, 보세요. right와 bottom을 0을 주니, 자식 요소가 부모의 오른쪽 아래에 딱 붙어버렸습니다. 즉, 부모의 오른쪽, 아래쪽으로부터 거리가 0인 위치로 이동했다는 것입니다.
right와 bottom을 각 10px씩 주었습니다. 이동한 것이 보이시죠?
또한 absolute도 relative와 마찬가지로 마이너스값을 줄 수도 있습니다.
이제 마지막 속성인 position:fixed; 에 대해 알아봅시다.
fixed는 말 그대로 고정됐다는 뜻입니다. position:fixed; 선언된 요소는, 부모를 전부 무시하고 최상위 태그인 body를 기준으로 고정됩니다. 또한 화면을 아무리 스크롤해도 스크린상에 보이는 그 위치에 그대로 있죠.
