position속성-relative, absolute, fixed

최대환·2021년 4월 14일

absolute fixed position position property relative static

HTML, CSS

목록 보기

4/8

position Property

포지션 프로퍼티는 html 코드와 성관없이 나타내고 싶은 어느 위치에나 요소를 표현할 수 있음.

position 에서 사용하는 값은 static, relative, absolute, fixed 4개가 있다.

static position

따로 position을 설정하지 않으면 기본적으로 position: static상태이다. static은 '정적인'이란 뜻이다.

👉 예시

💻 html

<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>repl.it</title>
	<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
  <div class='out_box'>
    <div class='in_box'>static position</div>
  </div>
</body>

💻 css

.out_box {
  background-color: greenyellow;
  width: 400px;
  height: 400px;
  position: static;
  margin: 30px auto;

}

.in_box {
  background-color: red;
  width: 200px;
  height: 200px;
  position: static;
}

👀 결과

relative position

position:relative의 relative는 '상대적인'이란 뜻이다.

top: 50px을 하면 '지금위치에서 50px만큼 위로 공간을 줘라'라는 뜻이다.

left: 30px을 하면 '지금위치에서 30px만큼 왼쪽으로 공간을 줘라'라는 뜻이다.

👉 예시

💻 html

<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>repl.it</title>
	<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
  <div class='out_box'>
    <div class='in_box'>relative position</div>
  </div>
</body>

💻 css

.out_box {
  background-color: greenyellow;
  width: 400px;
  height: 400px;
  position: static;
  margin: 30px auto;

}

.in_box {
  background-color: red;
  width: 200px;
  height: 200px;
  position: relative;
  top: 50px;
  left: 30px;
}

👀 결과

absolute position

absolute은 '절대적인'의 뜻으로 특정 부모에 대해 절대적을 움직인다.

여기서 부모의 position은 relative, fixed, absolute여야 작동한다.

일반적으로 absolute를 쓸 경우 기준이 되는 부모의 position은 relative이다.

bottom: 50px 값을 주면 '자신의 기준이 되는 부모를 기준으로 가장 밑에서 50px 간격을 줘라' 라는 뜻이다.

right: 30px 값을 주면 '자신의 기준이 되는 부모를 기준으로 가장 우측에서 30px 간격을 줘라' 라는 뜻이다.

👉 예시

💻 html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>repl.it</title>
	<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
  <div class='out_box'>
    relative position
    <div class='in_box'>absolute position</div>
  </div>
</body> 
</html>

💻 css

.out_box {
  background-color: greenyellow;
  width: 400px;
  height: 400px;
  position: relative;
  margin: 30px auto;

}

.in_box {
  background-color: red;
  width: 200px;
  height: 200px;
  position: absolute;
  bottom: 50px;
  right: 30px;
}

👀 결과

fixed position

fixed는 '결정된', '고정된'이라는 뜻으로 브라우저 화면을 기준으로 움직인다.

다른 html과는 전혀 상관없이 스크롤을 내려도 브러우저 화면기준으로 '고정된'자리에 위치한다.

top: 0; right: 0;이라는 뜻은 '화면 브라우저기준으로 항상 우측상단에 있어라'라는 뜻이다.

👉 예시

💻 html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>repl.it</title>
	<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
  <div class='out_box'>
    relative position
    <div class='in_box'>absolute position</div>
  </div>

  <div class='fixed_box'>
    fixed position
  </div>
</body> 
</html>

💻 css

.out_box {
  background-color: greenyellow;
  width: 400px;
  height: 400px;
  position: relative;
  margin: 30px auto;

}

.in_box {
  background-color: red;
  width: 200px;
  height: 200px;
  position: absolute;
  bottom: 50px;
  right: 30px;
}

.fixed_box {
  background-color: skyblue;
  width: 100px;
  height: 70px;
  position: fixed;
  top: 0;
  right: 0;
}