CSS position 속성

position 속성은 요소에 사용되는 위치 지정 방법의 유형(정적, 상대적, 고정, 절대 또는 고정)을 지정한다.

CSS position 속성

position 속성은 요소에 사용되는 위치 지정 방법의 유형을 지정한다.

다섯 가지 위치 값이 있다:

static
relative
fixed
absolute
sticky

그런 다음 요소는 위쪽, 아래쪽, 왼쪽 및 오른쪽 특성을 사용하여 배치된다. 그러나 position 속성을 먼저 설정하지 않으면 이러한 속성이 작동하지 않는다. 또한 위치 값에 따라 다르게 작동한다.

간략히 표로 개념을 정리하면 아래 표와 같다.

값	설명
static	요소를 문서 흐름에 따라 배치한다. 기본값
relative	요소를 문서흐름에 따라 배치한다. 자신을 기준으로 자식요소의 위치를 적용한다.
fixed	요소를 문서 흐름에서 제거한다. 브라우저(뷰포트) 기준으로 기준을 삼아 배치한다.
absolute	요소를 문서 흐름에서 제거한다. 가장 가까운 위치지정조상요소(relative가 적용된 조상)를 기준으로 위치를 지정한다.
sticky	요소를 문서 흐름에 따라 배치한다. 가장 가까운 블록레벨 조상을 기준으로 배치한다.

position속성에 static, relative, fixed, absolute, sticky 설정에 따른 비교 그림은 아래 그림과 같다.

CSS position:static;

HTML 요소는 기본적으로 정적으로 배치된다.

모든 태그들은 기본적으로 static이며 위에서 아래로, 왼쪽에서 오른쪽으로 위치 정렬된다.

static 위치 요소는 상단, 하단, 왼쪽 및 오른쪽 특성의 영향을 받지 않는다.

position: static 요소는 특별한 방식으로 배치되지 않으며 항상 페이지의 일반적인 흐름에 따라 배치된다:

<!DOCTYPE html>
<html>
<head>
<style>
div.static {
position: static;
border: 3px solid #73AD21;
}
</style>
</head>
<body>

<h2>position: static;</h2>

<p>위치가 정적인 요소. 특별한 방식으로 배치되지 않으며 항상 페이지의 정상적인 흐름에 따라 배치됩니다:</p>

<div class="static">
This div element has position: static;
</div>

</body>
</html>

div.static 클래스 요소에 position속성에 static값을 설정하였고, 결과 화면은 아래 그림과 같다.

CSS position: relative;

position: relative 요소는 기본 위치에 상대적인 위치에 지정된다.

자기 자신을 기준으로 top, right, bottom, left의 값에 따라 오프셋을 적용한다.

주로 position: absolute 등 속성을 줄 때 기준이 되도록 부모 태그에 설정한다.

비교적 위치에 있는 요소의 위쪽, 오른쪽, 아래쪽 및 왼쪽 속성을 설정하면 요소가 정상 위치에서 벗어나 조정된다. 다른 내용은 요소가 남긴 공백에 맞게 조정되지 않는다.

<!DOCTYPE html>
<html>
<head>
<style>
div.relative {
  position: relative;
  left: 30px;
  border: 3px solid #73AD21;
}
</style>
</head>
<body>

<h2>position: relative;</h2>

<p>위치가 있는 요소: 상대적이며, 정상 위치를 기준으로 위치가 지정됩니다:</p>

<div class="relative">
This div element has position: relative;
</div>

</body>
</html>

div.relative 클래스에 position속성에 relative값을 설정하였고, 그 결과 화면은 아래 그림과 같다.

CSS position: fixed;

position: fixed 요소는 뷰포트에 상대적으로 위치하며, 이는 페이지가 스크롤되더라도 항상 동일한 위치에 유지됨을 의미한다. 위쪽, 오른쪽, 아래쪽 및 왼쪽 특성은 요소를 배치하는 데 사용된다.

요소를 브라우저 기준으로 배치한다.(뷰포트의 초기 컨테이닝 블록)

주의할 점은 요소의 조상 중 하나라도 trasnform, perspective, filter 속성을 가지고 있다면 속성을 가진 조상이 기준점으로 변하게 된다.

fiexd를 사용하면 문서에서 스크롤을 해도 한군데에 잘 위치가 고정되어 있는다. 또한 top, right, bottom, left값을 지정할 수 있다.

고정 요소는 일반적으로 위치했을 페이지에 공백을 남기지 않는다.

페이지의 오른쪽 하단 모서리에 있는 고정 요소를 확인합니다. 사용되는 CSS는 다음과 같다:

<!DOCTYPE html>
<html>
<head>
<style>
div.fixed {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 300px;
  border: 3px solid #73AD21;
}
</style>
</head>
<body>

<h2>position: fixed;</h2>

<p>위치가 고정된 요소는 뷰포트에 대해 상대적으로 위치하며, 이는 페이지가 스크롤되더라도 항상 동일한 위치에 유지됨을 의미합니다:</p>

<div class="fixed">
This div element has position: fixed;
</div>

</body>
</html>

div.fixed 클래스에 position속성에 fixed값을 설정하였고, 그 결과 화면은 아래 그림과 같다.

CSS position: absolute;

position: absolute 요소는 뷰포트에 대해 고정된 것처럼 위치하는 대신 가장 가까운 위치에 있는 조상에 대해 상대적으로 위치한다.

만약 요소가 relative, absolute, fixed를 가지고 있지 않다면, 가장 위의 태그가 기준점이 된다.

absolute를 적용하면 해당 요소만 상이한 곳에 위치하게 된다. 위치를 지정하기 위해서는 top, right, bottom, left값을 지정할 수 있다.

absolute값은 요소에 다른 요소를 겹치는 경우에 주로 사용하며, 아래 예제처럼 이미지 위에 글자를 겹칠 때 주로 많이 활용된다.

그러나 절대 위치 요소에 위치한 조상이 없는 경우, 문서 본문을 사용하고 페이지 스크롤과 함께 이동한다.

참고: 절대 위치 요소는 정상 흐름에서 제거되며 요소와 겹칠 수 있다.

다음은 간단한 예이다:

<!DOCTYPE html>
<html>
<head>
<style>
div.relative {
  position: relative;
  width: 400px;
  height: 200px;
  border: 3px solid #73AD21;
}

div.absolute {
  position: absolute;
  top: 80px;
  right: 0;
  width: 200px;
  height: 100px;
  border: 3px solid #73AD21;
}
</style>
</head>
<body>

<h2>position: absolute;</h2>

<p>위치가 절대적인 요소. 고정된 것처럼 뷰포트에 상대적으로 위치하는 대신 가장 가까운 위치에 있는 상위 항목에 상대적으로 위치합니다:</p>

<div class="relative">이 div 요소의 위치는 상대적입니다;
  <div class="absolute">이 div 요소에는 위치가 있습니다: absolute;</div>
</div>

</body>
</html>

div.absolute 클래스에 position속성에 absolute값을 설정하였고 그 결과 화면은 아래 그림과 같다.

CSS position: sticky;

position:sticky 요소는 사용자의 스크롤 위치를 기준으로 배치된다.

표 관련 요소를 포함한 가장 가까운 블록 레벨 조상을 기준으로 하며, top, right, bottom, left값을 주고 그 위치에 도달하면 위치가 fixed 된다.

oveflow가 hidden, scroll, auto, overlay가 있으면 그 태그에 위치하게 된다. 즉 상대 위치처럼 움직이다가 내가 지정한 top, right, bottom, left값에 도달하면 위치가 고정된다.

고정 요소는 스크롤 위치에 따라 상대 요소와 고정 요소 사이를 전환한다. 뷰포트에서 지정된 오프셋 위치가 충족될 때까지 상대적으로 위치한 다음 "고정" 위치와 같이 "고정" 된다.

<!DOCTYPE html>
<html>
<head>
<style>
div.sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  padding: 5px;
  background-color: #cae8ca;
  border: 2px solid #4CAF50;
}
</style>
</head>
<body>

<p>스틱 포지셔닝이 작동하는 방식을 이해하기 위해 이 프레임 내부를 스크롤해 보십시오.</p>

<div class="sticky">I am sticky!</div>

<div style="padding-bottom:2000px">
  <p>이 예에서 스티커 요소는 스크롤 위치에 도달하면 페이지 상단(위: 0)에 부착됩니다.</p>
  <p>위로 스크롤하여 끈적임 제거.</p>
  <p>스크롤을 사용할 수 있는 텍스트입니다.. 로렘 입숨 돌로 자리를 잡고, 조명은 no quo를 정의하고, maluiset conconturque eum, altera fabulas uto를 정의합니다. Atqui causae gloriaturite, idagamomnis evertitium. 어페르트 노동자들은 거부한다, 넷. 인사이더트 효율적인 그의 광고. 음노 추행은 폭발적인 버스입니다.</p>
  <p>스크롤을 사용할 수 있는 텍스트입니다.. 로렘 입숨 돌로 자리를 잡고, 조명은 no quo를 정의하고, maluiset conconturque eum, altera fabulas uto를 정의합니다. Atqui causae gloriaturite, idagamomnis evertitium. 어페르트 노동자들은 거부한다, 넷. 인사이더트 효율적인 그의 광고. 풍뎅이자리.</p>
</div>

</body>
</html>

div.sticky 클래스에 position속성에 sticky값을 설정하였고, 결과 화면은 아래 그림과 같다.

CSS 이미지내에 텍스트 배치하기

이미지 위에 텍스트를 배치하는 방법:

<!DOCTYPE html>
<html>
<head>
<style>
.container {
  position: relative;
}

.topleft {
  position: absolute;
  top: 8px;
  left: 16px;
  font-size: 18px;
}

img {
  width: 100%;
  height: auto;
  opacity: 0.3;
}
</style>
</head>
<body>

<h2>이미지 텍스트</h2>
<p>왼쪽 상단 모서리에 있는 이미지에 텍스트 추가:</p>

<div class="container">
  <img src="img_5terre_wide.jpg" alt="Cinque Terre" width="1000" height="300">
  <div class="topleft">왼쪽 상단</div>
</div>

</body>
</html>

topleft 클래스에는 position속성에 absolute값이 top속성에는 8px left속성에는 16px, font-size는 18px를 설정하였고, 아래 <div class="topleft">에 왼쪽상단 글자는 아래 그림의 위치에 왼쪽 상단에 글자가 위치한다.

.topright {
  position: absolute;
  top: 8px;
  right: 16px;
  font-size: 18px;
}

이미지에 텍스트를 상단 우측에 배치하려면 position속성에 absolute top 8px right속성에는 16px를 설정하면 이미지 위에 우측 상단에 글자가 배치된다.

.bottomleft {
  position: absolute;
  bottom: 8px;
  left: 16px;
  font-size: 18px;
}

.bottomleft 클래스에 posistion속성에 absolute, bottom: 8px, left: 16px를 설정하여 이미지 위에 아래쪽 왼쪽에 글자가 배치된다.

.bottomright {
  position: absolute;
  bottom: 8px;
  right: 16px;
  font-size: 18px;
}

.bottomright 클래스에 posistion속성에 absolute, bottom: 8px, right: 16px를 설정하여 이미지 위에 아래쪽 오른쪽에 글자가 배치된다.

.center {
  position: absolute;
  top: 50%;
  width: 100%;
  text-align: center;
  font-size: 18px;
}

.center 클래스에 posistion속성에 absolute,top:50% width:100%, text-align: center를 설정하여 이미지 위에 정 가운데에 글자가 배치된다.