position 속성

position

HTML 요소가 배치되는 방식을 지정하는 속성 중 하나
static, relative, absolute, fixed, sticky 등의 속성 값이 존재
top, right, bottom, left와 같은 속성을 통해 원래 위치를 기준으로 상대적인 위치를 지정

position: static

일반적인 문서의 흐름에 맞춰 배치(default)

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		main, div {
			padding: 20px;
		}
		main {
			background-color: rgb(241, 164, 181);
			width: 300px;
		}
		.div_static {
			background-color: rgb(119, 136, 153);
			position: static;
		}
		.div_static:nth-of-type(2) {
			position: static;
			background: rgb(0, 255, 255);
		}
	</style>
</head>
<body>
	<main>
		main
		<div class="div_static">static</div>
		<div class="div_static">static</div>
		<div class="div_static">static</div>
	</main>
</body>
</html>

Untitled

position: relative

기본적으로 static와 같으나, 자신의 원래 위치를 기준으로 위치 지정 가능
하위요소 중 absolute로 지정 된 요소가 있다면, 해당 하위요소의 기준점이 됨

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		main, div {
			padding: 20px;
		}
		main {
			background-color: rgb(241, 164, 181);
			width: 300px;
		}
		.div_static {
			background-color: rgb(119, 136, 153);
			position: static;
		}
		.div_relative1 {
			background-color: rgb(182, 102, 102);
			position: relative;
		}
		.div_relative2 {
			background-color: rgb(133, 211, 146);
			position: relative;
			top: 30px;
			left: 50px;
		}
	</style>
</head>
<body>
	<main>
		main
		<div class="div_static">static</div>
		<div class="div_relative1">div_relative1</div>
		<div class="div_relative2">div_relative2</div>
	</main>
</body>
</html>

div_relative2의 원래 위치

Untitled

top와 left 속성을 지정한 후 div_relative2의 위치

Untitled

position: absolute

relative가 지정 된 상위 요소를 기준으로 위치를 지정
relative를 설정한 상위요소가 없을 경우, body를 기준으로 위치가 지정

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		main, section, div {
			padding: 20px;
		}
		main {
			background-color: rgb(241, 164, 181);
			width: 300px;
		}
		section {
			background-color: rgb(106, 173, 104);
			position: relative;
		}
		.div_static {
			background-color: rgb(119, 136, 153);
			position: static;
		}
		.div_relative {
			background-color: rgb(103, 112, 240);
			position: relative;
		}
		.div_absolute {
			background-color: dimgrey;
			position: absolute;
			top: 10px;
			left: 100px;
		}
	</style>
</head>
<body>
	<main>
		main
		<section>
			section
			<div class="div_static">static</div>
			<div class="div_relative">div_relative</div>
			<div class="div_absolute">div_absolute</div>
		</section>
	</main>
</body>
</html>

absolute 값 지정 전

Untitled

absolute 값 지정 후

section 태그와 클래스 div_relative 태그에 relative를 설정했으나, 상위 요소인 section을 기준으로 위치가 지정 됨

position: fixed

뷰포트(브라우저의 전체화면)을 기준으로 특정 위치에 고정시키기 위해 사용

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		main, div {
			padding: 20px;
		}
		main {
			background-color: rgb(241, 164, 181);
			width: 300px;
			height: 1000px;
		}
		.div_static {
			background-color: rgb(119, 136, 153);
			position: static;
		}
		.div_fixed {
			background-color: dimgrey;
			position: fixed;
			bottom: 20px;
			right: 20px;
		}
	</style>
</head>
<body>
	<main>
		main
		<div class="div_static">static</div>
		<div class="div_static">static</div>
		<div class="div_fixed">div_fixed</div>
	</main>
</body>
</html>

fixed 지정 전

Untitled

fixed 지정 후, 뷰포트를 기준으로 위치를 지정

Untitled

position: sticky

브라우저 화면을 스크롤 할 경우 나타나는 효과