[CSS] TIL8 : 위치(포지션) 설정 / 상대 위치와 절대 위치 설정
▣ 위치(Position)
아래와 같이 작성한 예시와 함께 'position' 속성에 대해 살펴보도록 하겠습니다. 원활한 실습을 위해 아래의 기본 스타일은 웹 페이지와 동일한 경로에 'css' 폴더를 만들어 'style.css' 파일로 저장해 두겠습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Position</title>
<style>
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
body {
height: 3600px;
}
.block {
width: 100px;
height: 100px;
}
.container {
background-color: #333;
width: 500px;
height: 500px;
}
#block-1 {
background-color: red;
}
#block-2 {
background-color: yellow;
}
#block-3 {
background-color: green;
}
#block-4 {
background-color: blue;
}
#block-5 {
background-color: orange;
}
</style>
</head>
<body>
<div id="block-1" class="block"></div>
<div class="container">
<div id="block-2" class="block"></div>
<div id="block-3" class="block"></div>
</div>
<div id="block-4" class="block"></div>
<div id="block-5" class="block"></div>
</body>
</html>
□ 정적(Static) 위치와 상대(Relative) 위치
일반적으로 HTML 요소의 위치는 브라우저의 상(Top), 하(Bottom), 좌(Left), 우(Right) 어디를 기준으로 하느냐에 따라 속성의 이름을 정하고, 그 기준으로부터 떨어진 거리를 값으로 설정합니다.
<style>
/* Static Position */
#block-1 {
top: 50px;
left: 50px;
}
</style>
위의 코드는 빨간 박스를 브라우저 상단으로부터 50px, 좌측으로부터 50px 떨어진 거리에 위치시킨다는 의미입니다. 하지만 아래의 결과에서 볼 수 있듯이 위치에는 아무런 변화가 없습니다.
이 것은 앞서 TIL7에서 설명한 바와 같이 HTML 요소의 'position' 속성의 초기값이 'static'으로 설정되어 있기 때문입니다.
정적 위치는 HTML 요소가 최초에 자리 잡은위치라고 이해할 수 있고, 상대 위치는 정적 위치를 기준으로 떨어진 거리를 값으로 설정합니다. 즉, 모든 요소들은 각자의 최초 위치가 기준점이 됩니다.
<style>
/* Relative Position */
#block-1 {
top: 50px;
left: 50px;
position: relative;
}
</style>
빨간 박스의 'position' 속성의 값을 'relative'로 설정하면 아래와 같이 빨간 박스가 상단으로부터 50픽셀, 좌측으로부터 50픽셀 이동한 것을 확인할 수 있습니다.
□ z-index
정적 위치를 상대적 위치로 바꾸게 되면 위의 결과에서 볼 수 있듯이 요소가 서로 겹칠 수 있습니다. 이때 위로 겹칠지 아니면 밑으로 겹칠지 정할 수 있는 속성이 'z-index'입니다.
<style>
/* Relative Position */
#block-1 {
top: 50px;
left: 50px;
position: relative;
/* Z index */
z-index: -1;
}
</style>
빨간 박스의 'z-index' 속성의 값을 '-1'로 설정하면 아래와 같이 빨간 박스가 검은 박스 밑으로 이동하였음을 확인할 수 있습니다.
□ 상대(Relative) 위치와 절대(Absolute) 위치
<style>
/* Relative Position */
#block-2 {
top: 100px;
left: 100px;
position: relative;
}
#block-3 {
top: 200px;
left: 200px;
position: relative;
}
</style>
위의 코드를 적용한 결과 아래에서 볼 수 있듯이 노란 박스는 자신의 최초 위치를 기준으로 상단으로부터 100픽셀, 좌측으로부터 100픽셀 떨어져 위치하고, 녹색 박스는 자신의 최초 위치를 기준으로 상단으로부터 200픽셀, 좌측으로부터 200픽셀 떨어진 위치에 있습니다.
노란 박스와 녹색 박스의 위치 값들을 좌표 형식으로 나타내어 보면 (100, 100)과 (200, 200)으로 표현할 수 있는데, 애초에 기준이 서로 다르다 보니 브라우저를 통해 보는 입장에서 이러한 값들은 오히려 혼동스러울 수 있습니다.
따라서 명확한 기준을 적용하고 그에 따른 요소들의 위치를 제어하기 위해 'position'속성의 값을 'absolute'로 설정합니다. 절대 위치는 부모 요소를 기준으로 떨어진 거리를 값으로 설정하며, 이때 부모 요소는 반드시 'position'속성의 값이 'relative'로 설정되어야 합니다. 부모 요소가 특정되지 않을 경우에는 <body> 요소가 기준이 됩니다.
<style>
/* Absolute Position */
#block-2 {
top: 100px;
left: 100px;
position: absolute;
}
#block-3 {
top: 200px;
left: 200px;
position: absolute;
}
</style>
아래는 노란 박스와 녹색 박스의 'position' 속성의 값을 'absolute'로 설정한 후 확인한 결과이며, 이때 부모 요소를 특정하지 않았기 때문에 <body> 요소를 기준으로 좌표 형식을 이용하여 노란 박스의 위치는 (100, 100), 녹색 박스의 위치는 (200, 200)으로 표현할 수 있습니다.
□ 부모 요소의 'relative' 설정
위의 결과에서 만약 검은 박스를 기준으로 노란 박스와 녹색 박스의 위치를 이동시켜 나타내고자 한다면 어떻게 해야 할까요?
<style>
/* Absolute Position */
#block-2 {
top: 100px;
left: 100px;
position: absolute;
}
#block-3 {
top: 200px;
left: 200px;
position: absolute;
}
/* Parent Element : Relative Position */
.container {
position: relative;
}
</style>
앞서 설명한 바와 같이 검은 박스(선택자 .container)를 부모 요소로 정하고 'postion' 속성의 값을 'relative'로 설정하면, 검은 박스를 기준으로 좌표 형식을 이용하여 노란 박스의 위치는 (100, 100), 녹색 박스의 위치는 (200, 200)으로 표현할 수 있습니다.
※ 요점 정리
1. position: static;
- 최초에 자리 잡은 위치
- 'top', 'bottom', 'left', 'right' 속성의 설정에 의해 영향을 받지 않음
- 위치가 이동되거나 서로 겹치는 경우가 없음
2. position: relative;
- 'top', 'bottom', 'left', 'right' 속성의 설정에 의해 서로의 위치가 영향을 받음
- 위치가 이동되거나 위 또는 아래로 겹치는 경우가 발생함
=> 'z-index' 속성을 이용하여 위 또는 아래를 설정할 수 있음
- 모든 요소들은 각자의 최초 위치가 기준점(top, left 기준으로 0, 0) 임
- 즉, 모든 요소들은 각자 자신만의 기준점을 가짐
3. position: absolute;
- 특정 부모 요소를 기준으로 한 위치
- 단, 부모 요소의 'position' 속성의 값은 'relative'로 설정되어야 함
- 부모 요소가 특정되지 않을 경우('relative'로 설정되지 않을 경우) <body> 요소가 기준이 됨
□ 'fixed' 설정
HTML 요소를 'Viewport'의 특정 위치에 고정시킬 수 있는 'position' 속성입니다. 스크롤 기능이 활성화되어도 브라우저의 특정 위치에 고정되어 사용자가 항상 볼 수 있습니다.
<style>
/* Fixed */
#block-4 {
position: fixed;
top: 600px;
left: 400px;
}
#block-5 {
width: 400px;
}
</style>
파란 박스의 'position' 속성의 값을 'fixed'로 설정하면 아래와 같이 파란 박스가 상단으로부터 600픽셀, 좌측으로 부터 400픽셀 떨어져 고정되어 있음을 확인할 수 있습니다.
□ 'sticky' 설정
스크롤 기능이 활성화되었을 때 웹 페이지와 함께 스크롤링되다가 특정 위치에서 HTML 요소가 고정되는 'position' 속성입니다. '메인 메뉴(Main menu)' 또는 '내비게이션 바(Navigation bar)' 등에 주로 적용합니다.
<style>
/* Fixed */
#block-4 {
position: fixed;
top: 600px;
left: 400px;
}
#block-5 {
width: 400px;
/* Sticky*/
position: sticky;
top: 0;
}
</style>
오렌지색 박스의 'position' 속성의 값을 'sticky'로 설정하면 아래와 같이 오렌지색 박스가 웹 페이지와 함께 스크롤링되다가 상단으로부터 0픽셀 떨어진 위치에 붙어 있음을 확인할 수 있습니다.
