position 속성
position 속성은 요소의 위치 지정 방식을 설정합니다. 이 속성은 주로
top,
right,
bottom,
left 속성과 함께 사용되며,
이들은 각각 위쪽, 오른쪽, 아래쪽, 왼쪽의 간격을 설정합니다.
문법
선택자 {
position: absolute | relative | fixed | static | sticky;
}
position의 값
| 값 | 설명 |
|---|---|
absolute |
절대 위치 지정. 요소가 문서의 일반적인 흐름에서 제거되고, 위치가 지정된 가장 가까운 조상 요소(있는 경우) 또는 브라우저 창을 기준으로 위치가 지정됩니다. |
relative |
상대 위치 지정. 요소가 문서 흐름에서의 자신의 원래 위치를 기준으로 이동되지만, 원래 차지하던 공간은 그대로 유지됩니다. |
fixed |
고정 위치 지정. 요소가 문서의 일반적인 흐름에서 제거되고 브라우저 창을 기준으로 위치가 지정됩니다. 페이지를 스크롤해도 제자리에 유지됩니다. |
static |
정적 위치 지정. 위치 지정이 적용되지 않음을 의미하며, 요소는 일반적인 방식으로 동작합니다. |
sticky |
고착 위치 지정.
요소는 스크롤 시 지정된 위치에 도달할 때까지 relative처럼 동작하다가,
그 후에는 지정된 위치에 고정됩니다(fixed처럼).
|
기본값: static.
예제 . 절대 위치 지정
요소를 작은 간격을 두고 화면의 왼쪽 상단 모서리에 배치해 보겠습니다:
<div class="elem"></div>
<div class="main">
some long text
</div>
.elem {
position: absolute;
top: 40px;
left: 50px;
width: 100px;
height: 100px;
background-color: #98fb98;
}
.main {
width: 400px;
text-align: justify;
margin: 20px auto;
}
:
예제 . 절대 위치 지정
이번에는 요소를 작은 간격을 두고 화면의 오른쪽 상단 모서리에 배치해 보겠습니다:
<div class="elem"></div>
<div class="main">
some long text
</div>
.elem {
position: absolute;
top: 40px;
right: 50px;
width: 100px;
height: 100px;
background-color: #98fb98;
}
.main {
width: 400px;
text-align: justify;
margin: 20px auto;
}
:
예제 . 고정 위치 지정
고정 위치 지정에서는 요소가 스크롤해도 제자리에 유지됩니다:
<div class="elem"></div>
<div class="main">
some long text
</div>
.elem {
position: fixed;
top: 40px;
left: 50px;
width: 100px;
height: 100px;
background-color: #98fb98;
}
.main {
width: 400px;
text-align: justify;
margin: 20px auto;
}
:
예제 . 상대 위치 지정
상대 위치 지정에서는 요소가 자신의 원래 위치를 기준으로 이동하지만, 다른 요소들은 요소가 이동하지 않은 것처럼 동작합니다:
<div class="container">
<div class="elem elem1"></div>
<div class="elem elem2"></div>
<div class="elem elem3"></div>
</div>
.container {
display: flex;
justify-content: flex-row;
}
.elem {
margin: 0 3px;
width: 100px;
height: 100px;
background-color: #add8e6;
}
.elem2 {
position: relative;
top: 20px;
left: 30px;
background-color: #e6addf;
}
:
예제 . 중첩
부모 요소의 position 속성 값이
relative인 경우,
절대 위치가 지정된 자식 요소는
부모 요소를 기준으로 위치가 지정됩니다:
<div class="container">
<div class="elem"></div>
</div>
.container {
position: relative;
border: 1px solid red;
width: 500px;
height: 300px;
}
.elem {
position: absolute;
top: 0px;
right: 0px;
width: 100px;
height: 100px;
background-color: #add8e6;
}
:
예제 . 중첩
부모 요소의 position 속성 값이
absolute인 경우에도,
절대 위치가 지정된 자식 요소는
부모 요소를 기준으로 위치가 지정됩니다:
<div class="container">
<div class="elem"></div>
</div>
.container {
position: absolute;
top: 30px;
left: 30px;
border: 1px solid red;
width: 500px;
height: 300px;
}
.elem {
position: absolute;
top: 0px;
right: 0px;
width: 100px;
height: 100px;
background-color: #add8e6;
}
:
예제 . 고착 위치 지정
요소의 position 속성 값이
sticky인 경우, 요소는 스크롤 시 지정된 위치에 도달할 때까지
relative처럼 동작하다가, 그 후에는 그 위치에 고정됩니다.
고착 헤더를 만들어 보겠습니다:
<h1>Main Site Header</h1>
<div class="header">header header header</div>
<div class="main">
some long text
</div>
h1 {
text-align: center;
}
.header {
position: sticky;
top: 0;
padding: 20px;
background: #f0f0f0;
text-align: center;
font-weight: bold;
}
.main {
width: 400px;
margin: 20px auto;
border: 1px solid #ccc;
padding: 20px;
text-align: justify;
}
:
예제 . 위치 없음
절대 위치 지정이 적용된 요소에 위치를 지정하지 않으면, 요소는 위치 지정이 없을 때 서 있던 자리에 그대로 있게 되지만, 다른 요소들은 그 요소를 인지하지 않게 됩니다:
<div class="container">
<div class="elem elem1"></div>
<div class="elem elem2"></div>
<div class="elem elem3"></div>
</div>
.container {
position: relative;
border: 1px solid red;
width: 500px;
height: 300px;
}
.elem {
display: inline-block;
}
.elem2 {
position: absolute;
width: 50px;
height: 50px;
background-color: #e6addf;
}
.elem1, .elem3 {
width: 100px;
height: 100px;
background-color: #add8e6;
}
:
예제 . 한 축
절대 위치 지정 시 한 축에만 위치를 지정할 수 있습니다.
예를 들어, top 속성만 설정하면,
수직 방향으로는 원하는 위치에 배치되지만,
수평 방향으로는 원래 서 있던 자리에 그대로 있게 됩니다:
<div class="container">
<div class="elem elem1"></div>
<div class="elem elem2"></div>
<div class="elem elem3"></div>
</div>
.container {
position: relative;
border: 1px solid red;
width: 500px;
height: 300px;
}
.elem {
display: inline-block;
}
.elem2 {
position: absolute;
top: 20px;
width: 50px;
height: 50px;
background-color: #e6addf;
}
.elem1, .elem3 {
width: 100px;
height: 100px;
background-color: #add8e6;
}
:
예제 . 모든 위치
절대 위치 지정 시 너비와 높이를 지정하지 않고 모든 방향의 위치를 지정할 수 있습니다. 이 경우 요소는 부모 블록의 중앙에 위치하게 됩니다:
<div class="container">
<div class="elem"></div>
</div>
.container {
position: relative;
border: 1px solid red;
width: 500px;
height: 300px;
}
.elem {
position: absolute;
top: 20px;
bottom: 20px;
left: 20px;
right: 20px;
background-color: #add8e6;
}
:
함께 보기
-
요소의 쌓임 순서를 지정하는
z-index속성
