[css]position - static, relative, absolute, fixed
position: static(정적 위치), relative(상대 위치), absolute(절대 위치), fixed(고정 위치)
position 속성 값을 명시하지 않으면 기본적으로 static으로 설정된다. 즉 static이 기본 값이다.
static일 때는 요소를 일반적인 문서 흐름(왼->오, 위->아래)에 따라 배치한다.
top(위), right(오른쪽), bottom(아래), left(왼쪽) 속성을 사용해 위치 조절을 할 수 있다.
<html>
<head>
<meta charset="UTF-8">
<title>ex14</title>
<style>
.ps {position: static; /* left: 30px; top: 30px; */ background-color: cyan; width: 400px; height: 50px;}
.pr1 {position: relative; /* left: 10px; top: 20px; */ backgroun color:orange; width: 400px; height: 50px;}
.pr2 {position: relative; left: 50px; background-color: lightgreen; width: 400px; height: 50px;}
</style>
</head>
<body>
<h1>positioning style</h1>
<p class="ps">정적 위치 설정 적용</p>
<div class="pr1">상대 위치 설정 적용</div>
<p class="pr2">상대 위치 설정 적용</p>
</body>
</html>
정적 위치로 설정되어 있을 때는 위치 조절(top, right, bottom, left, z-index)속성이 아무런 영향도 주지 않는다.
left: 30px; top: 30px;의 주석을 해제해도 같은 결과가 나온다.
상대 위치로 설정되어 있을 때는 각각의 태그가 기존 static이었을 때의 위치를 기준으로 top, right, bottom, left 방향으로 주어진 픽셀만큼 안쪽으로 이동한다. 바깥쪽으로 이동하게 하고 싶으면 음수를 주면 된다.
pr1클래스의 div태그에 position을 relative로만 변경했을 때에는 static과 다르지 않은 것을 볼 수 있다.
left: 10px; top: 20px; 속성을 추가해보자!
점선은 static이었을 때의 위치를 임의로 표시한 것이다.
pr1클래스의 div태그가 점선에서 왼쪽에서 10px, 위에서 20px만큼 안쪽으로 이동한 것을 알 수 있다.
pr2클래스의 p태그 역시 점선에서 왼쪽에서 50px만큼 안쪽으로 이동했다.
<html>
<head>
<meta charset="UTF-8">
<title>ex15</title>
<style>
.ps { position: static; background-color: cyan; width: 400px; height: 50px; }
.pf { position: fixed; right: 40px; top: 40px; background-color:orange; width: 400px; height: 50px; }
.pa { position: absolute; right: 100px; top: 10px; background-color: lightgreen; width: 400px; height: 50px; }
</style>
</head>
<body>
<h1>positioning style2</h1>
<p class="ps">정적 위치 설정 적용</p>
<div class="pf">고정 위치 설정 </div>
<p class="pa">절대 위치 설정 적용</p>
<p class="ps">정적 위치 설정 적용</p>
<p class="ps">정적 위치 설정 적용</p>
</body>
</html>
절대 위치는 요소를 일반적인 문서 흐름에서 제거하고, 페이지 레이아웃에 공간도 배정하지 않는다.
대신 가장 가까운 위치 지정 조상 요소(position 속성 값이 static이 아닌 요소)에 대해 상대적으로 배치한다.
단, 조상 중 위치 지정 요소가 없다면 body태그를 기준으로 삼는다.
pa 클래스의 p태그도 조상 중 위치 지정 요소가 없어 body태그를 기준으로 위쪽에서 10px, 오른쪽에서 100px만큼 안쪽에 배치되었다.
고정 위치는 창의 스크롤을 움직여도 사라지지 않고 속성 값을 그대로 유지한다.
pf 클래스의 div태그 역시 항상 위쪽에서 40px, 오른쪽에서 40px만큼 안쪽에 위치하는 것을 확인할 수 있다.
<참고>
https://developer.mozilla.org/ko/docs/Web/CSS/position
position - CSS: Cascading Style Sheets | MDN
CSS position 속성은 문서 상에 요소를 배치하는 방법을 지정합니다. top (en-US), right (en-US), bottom (en-US), left (en-US) 속성이 요소를 배치할 최종 위치를 결정합니다.
developer.mozilla.org
https://www.zerocho.com/category/CSS/post/5864f3b59f1dc000182d3ea1
https://www.zerocho.com/category/CSS/post/5864f3b59f1dc000182d3ea1
www.zerocho.com