안녕하세요. 오늘은 CSS position에 알아볼게요.
position
position 속성을 사용하면 웹 문서에서 요소의 위치를 지정해요.
position 속성
배치 방법을 지정을 해서 웹 문서 안의 요소를 배치해요.
텍스트나 이미지를 나란히 배치하거나 원하는 위치 선택이 가능해요.
| 종류 | 설명 |
| static | 문서의 흐름에 맞춰 배치 : 기본값 |
| relative | static + 위칫값 지정 |
| absolute | relative 값을 사용한 상위 요소를 기준으로 위치를 지정해 배치 |
| fixed | 브라우저 창을 기준으로 위치를 지정해 배치 |
다음은 position 속성으로 요소 위치 지정 예제예요.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>CSS position 속성</title>
<style>
body {
width: 400px;
}
p {
width:500px;
height:200px;
background-color:#eee;
border:1px solid #ccc;
line-height:2;
}
#static {
position:static;
}
#relative-1{
position:relative;
}
#relative-2 {
position:relative; /* 포지셔닝 - relative */
left:100px; /* 왼쪽에서 100px 떨어지게 */
top:-50px; /* 위쪽에서 -50px 떨어지게 (위로 이동) */
}
#fixed {
width:100px;
height:100px;
background-color:#222;
position:fixed; /* 포지셔닝 - fixed */
right:30px; /* 오른쪽에서 30px 떨어지게 */
top:30px; /* 위쪽에서 30px 떨어지게 */
}
</style>
</head>
<body>
<p id="static">롯데 자이언츠(Lotte Giants)는 대한민국 부산광역시를 연고지로 하는 KBO 소속 프로 야구 팀이다. 사직야구장을 홈구장으로 사용하고 있으며, 울산문수야구장을 제2홈구장으로 사용하고 있다.</p>
<p id="relative-1">1975년에 실업 야구단으로 창단되어 역대 KBO구단중 가장 오래된 구단이다. 1982년에 프로 야구단으로 전환했다. 1984년과 1992년 두 차례 한국시리즈 우승을 차지했고, 2008년부터 2012년까지 5년연속 포스트시즌 진출을 이루어냈다.</p>
<p id="relative-2">롯데 자이언츠의 별명은 부산광역시의 상징 새가 갈매기이고, 구단의 대표적 응원가도 〈부산갈매기〉라서 “부산 갈매기"라고 부른다. 롯데 자이언츠의 2023시즌 우승을 응원합니다!</p>
<p id="fixed"></p>
</body>
</html>
+) position 속성 중에서 absolute값 사용할 경우
요소 중에서 position: relative를 사용한 요소를 기준으로 위치를 결정해요.
그리고 부모 요소 중에 없을 경우 상위 요소를 찾아보고 그래도 없다면 더 위의 요소에서 찾아요.
absolute 사용 시 부모 요소에 position: relative를 지정해야 원하는 대로 배치 가능해요.
left, right, top, bottom 속성
웹 요소의 위치 지정이 가능한데요.
position 속성으로 기준 위치를 지정한 뒤
요소의 위치를 left, right, top, bottm 속성에서 선택하여 속성값을 지정해요.
| left | 기준 위치와 요소 사이에 왼쪽으로 얼마나 떨어져 있는지 지정 |
| right | 기준 위치와 요소 사이에 오른쪽으로 얼마나 떨어져 있는지 지정 |
| top | 기준 위치와 요소 사이에 위쪽으로 얼마나 떨어져 있는지 지정 |
| bottom | 기준 위치와 요소 사이에 아래쪽으로 얼마나 떨어져 있는지 지정 |
다음은 텍스트 요소 배치 예제예요.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>CSS 위치 속성</title>
<style>
*{
margin:0; /* 마진 초기화 */
padding:0; /* 패딩 초기화 */
}
p {
width:300px; /* 너비 - 300px */
border:1px solid #ccc; /* 테두리 - 1픽셀 회색 실선 */
padding:10px; /* 네방향 패딩 10px */
}
#pos1{
position:absolute; /* 포지셔닝 - absolute */
left:50px; /* 왼쪽에서 50px 떨어지게 */
top:50px; /* 위쪽에서 50px 떨어지게 */
}
#pos2 {
position:absolute; /* 포지셔닝 - absolute */
right:100px; /* 오른쪽에서 100px 떨어지게 */
top:100px; /* 위쪽에서 100px 떨어지게 */
}
#pos3 {
position: absolute; /* 포지셔닝 - absolute */
left:100px; /* 왼쪽에서 50px 떨어지게 */
bottom:100px; /* 아래쪽에서 100px 떨어지게 */
}
</style>
</head>
<body>
<p id="pos1">롯데 자이언츠(Lotte Giants)는 대한민국 부산광역시를 연고지로 하는 KBO 소속 프로 야구 팀이다. 사직야구장을 홈구장으로 사용하고 있으며, 울산문수야구장을 제2홈구장으로 사용하고 있다.</p>
<p id="pos2">1975년에 실업 야구단으로 창단되어 역대 KBO구단중 가장 오래된 구단이다. 1982년에 프로 야구단으로 전환했다. 1984년과 1992년 두 차례 한국시리즈 우승을 차지했고, 2008년부터 2012년까지 5년연속 포스트시즌 진출을 이루어냈다.</p>
<p id="pos3">롯데 자이언츠의 별명은 부산광역시의 상징 새가 갈매기이고, 구단의 대표적 응원가도 〈부산갈매기〉라서 “부산 갈매기"라고 부른다. 롯데 자이언츠의 2023시즌 우승을 응원합니다!</p>
</body>
</html>
여기까지 CSS position에 알아봤는데요.
잘 활용하면 버튼, 이미지, 글자 등을 내가 원하는 위치에 정확하게 배치할 수 있을 것 같아요.
'Frontend > CSS' 카테고리의 다른 글
| CSS Flexbox (0) | 2025.10.30 |
|---|---|
| CSS background (0) | 2025.10.28 |
| CSS Layout (display / float / clear) (0) | 2025.10.24 |
| CSS margin & padding (0) | 2025.10.22 |
| CSS border (0) | 2025.10.20 |