▣ position
· 텍스트, 이미지, 표 등의 요소를 웹 문서에 배치할 때 사용하는 속성
| 구분 | 속성값 | 설명 |
| 정적 위치 설정 | position: static; | 각종 요소를 웹 문서의 흐름에 따라 배치한다. |
| 상대 위치 설정 | position: relative; | 웹 문서의 정상적인 위치에서 상대적으로 얼마나 떨어져 있는지 표시하여 배치하는 방법이다. |
| 절대 위치 설정 | position: absolute; | 전체 페이지를 기준으로 top, right, bottom, left의 속성을 이용하여 원하는 위치에 배치하는 방법이다. |
| 고정 위치 설정 | position: fixed; | 요소의 위치를 '절대 위치 설정'과 똑같은 방법으로 배치하되, 창의 스크롤을 움직여도 사라지지 않고 고정된 위치에 그대로 있다. |
▣ 정적 위치 설정
· 텍스트, 이미지, 표 등을 웹 문서의 흐름에 따라 배치하는 방법
· 블록 요소는 위에서 아래로 쌓이고, 인라인 요소는 같은 줄에 순서대로 배치
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>정적 위치 설정으로 요소 배치하기</title>
<style>
body {
font-weight: bold;
font-size: 12pt;
}
.sp1 {
position: static;
top: 100px; /* 적용되지않음 */
background-color: cyan;
width: 400px;
height: 50px;
}
.sp2 {
position: static;
left: 30px; /* 적용되지않음 */
background-color: orange;
width: 400px;
height: 50px;
}
.sp3 {
background-color: lightgreen;
width: 400px;
height: 50px;
}
</style>
</head>
<!-- position:sticky; -->
<!-- 가장 가까운 스크롤 가능한 부모/조상 요소의 스크롤 위치를기준으로 고정됨 -->
<!-- 조상 : overflow: hidden, scrool,auto; -->
<body>
<h1>positioning style1</h1>
<p class="sp1">정적 위치 설정 적용1</p>
<div class="sp2">정적 위치 설정 적용2</div>
<p class="sp3">정적 위치 설정 적용3</p>
</body>
</html>
▣ 상대 위치 설정
· 각종 요소가 웹 문서의 정적 위치값에서 상대적으로 얼마나 떨어져 있는지 표시하여 배치하는 방법
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>상대 위치 설정으로 요소 배치하기</title>
<style>
body {
font-weight: bold;
font-size: 12pt;
}
.sp {
position: static;
left: 30px;
background-color: cyan;
width: 400px;
height: 50px;
}
.rp1 {
position: relative;
left: 30px;
top: -10px;
background-color: orange;
width: 400px;
height: 50px;
}
.rp2 {
position: relative;
left: 60px;
top: 20px;
background-color: lightgreen;
width: 400px;
height: 50px;
}
</style>
</head>
<body>
<h1>positioning style1</h1>
<p class="sp">상대 위치 설정 적용1</p>
<div class="rp1">상대 위치 설정 적용 - left 30px, top 10px</div>
<p class="rp2">상대 위치 설정 적용 - left 60px, top 20px</p>
</body>
</html>
▣ 절대 위치 설정
· 웹 문서의 흐름과는 상관없이 전체 페이지를 기준으로 top, right, bottom, left의 속성을 이용하여 원하는 위치에 배치시키는 방법
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>절대 위치 설정으로 요소 배치하기</title>
<style>
body {
font-weight: bold;
font-size: 12pt;
}
.ap1 {
background-color: yellow;
position: absolute;
left: 30px;
top: 70px;
width: 400px;
height: 50px;
/* z-index: 1; */
}
.ap2 {
background-color: lightgreen;
position: absolute;
left: 40px;
top: 90px;
width: 400px;
height: 50px;
}
.rp {
background-color: cyan;
position: relative;
left: 50px;
top: 80px;
width: 400px;
height: 50px;
}
</style>
</head>
<body>
<h1>positioning style3</h1>
<div class="ap1">절대 위치 설정 적용 - left 30px, top 70px</div>
<div class="ap2">절대 위치 설정 적용 - left 40px, top 90px</div>
<div class="rp">절대 위치 설정 적용 - left 50px, top 80px</div>
</body>
</html>
▣ 고정 위치 설정
· 창의 스크롤을 움직여도 사라지지 않고 고정된 위치에 그대로 있음
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>고정 위치 설정으로 요소 배치하기</title>
<style>
body {
font-weight: bold;
font-size: 12pt;
}
.p {
background-color: yellow;
width: 300px;
height: 50px;
}
.fp {
position: fixed;
right: 5px;
top: 5px;
background-color: lightgreen;
width: 300px;
height: 50px;
}
</style>
</head>
<body>
<h1>positioning style4</h1>
<p class="p">기본 위치 설정 박스1</p>
<p class="p">기본 위치 설정 박스2</p>
<p class="p">기본 위치 설정 박스3</p>
<p class="p">기본 위치 설정 박스4</p>
<p class="p">기본 위치 설정 박스5</p>
<p class="p">기본 위치 설정 박스6</p>
<p class="p">기본 위치 설정 박스7</p>
<p class="p">기본 위치 설정 박스8</p>
<p class="p">기본 위치 설정 박스9</p>
<p class="p">기본 위치 설정 박스10</p>
<p class="fp">기본 위치 설정 박스 : 오른쪽 스크롤 위아래로 이동해보기</p>
</body>
</html>