[CSS] Position 속성(relative, absolute, fixed)

양주영·2021년 11월 2일

CSS WeCode html

css

목록 보기

2/3

💡 Position 속성

position 속성은 웹 문서 안 요소들을 어떻게 배치할 지를 정하는 속성이다.
position은 크게 네 가지의 종류가 있다.

✅ static

기본값. position 속성을 입력하지 않았을 때의 기본값

✅ relative

해당 요소의 원래 위치를 기준으로 위치를 잡을 때.
(여기서 원래 위치란, position:relative 속성이 없을 때의 위치)

position:relative; 자체로는 특별한 의미가 없고, 딱히 어느 위치로 이동하지는 않는다.
위치를 이동시켜주는 top, right, bottom, left 프로퍼티가 있어야 원래의 위치에서 이동할 수 있다.

🌟🌟 top, right, bottom, left는 position이라는 프로퍼티가 있을 때만 적용되는 프로퍼티이다.

✅ absolute

특정 부모에 대한 기준으로 절대적인 위치(겹침 가능)에 둘 수 있는 속성값
적용된 요소는 아무도 알아보지 못한다(붕뜬다)

여기에서 부모의 조건은 position이 기본값(static)이 아닌 relative, fixed, absolute 하나라도 있어야 한다.
absolute는 브라우저가 문서의 흐름과 상관없이 left, right, top, bottom 속성값을 이용하여 요소를 위치시키는 속성값이다.

아래 예시를 참고하여 제대로 이해해보자.

<!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" />
    <style>
      * {
          box-sizing: border-box;
        }

      .input-box {
        width: 300px;
        position: relative;
      }

      input {
        width: 100%;
        border: 1px solid #bbb;
        border-radius: 8px;
        padding: 10px 12px;
        font-size: 14px;
      }

      img {
        position: absolute;
        width: 17px;
        margin: 0;
      }
    </style>
  </head>
  <body>
    <div class="input-box">
      <input type="text" placeholder="검색어 입력"/>
      <img src="https://s3.ap-northeast-2.amazonaws.com/cdn.wecode.co.kr/icon/search.png" alt="돋보기"/>
    </div>
  </body>
</html>

기준이 되는 input-box에 relative를 줬고,
절대적인 위치에 있어야 하는( = 겹쳐야 하는 ) 값에 absolute를 줬더니 input-box내부가 아니라 위와 같이 바깥쪽에 위치한다.
여기에서 우리가 알 수 있는 것은 꼭 left, right, top, bottom 속성값을 이용해야 원하는 곳에 배치할 수 있다는 점이다.
아래 예시를 보자.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>position:absolute;</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
    <style>
      * {
          box-sizing: border-box;
        }

      .input-box {
        width: 300px;
        position: relative;
      }

      input {
        width: 100%;
        border: 1px solid #bbb;
        border-radius: 8px;
        padding: 10px 12px;
        font-size: 14px;
      }

      img {
        position: absolute;
        width: 17px;
        top: 10px;
        right: 12px;
        margin: 0;
      }
    </style>
  </head>
  <body>
    <div class="input-box">
      <input type="text" placeholder="검색어 입력"/>
      <img src="https://s3.ap-northeast-2.amazonaws.com/cdn.wecode.co.kr/icon/search.png" alt="돋보기"/>
    </div>
  </body>
</html>

img에 top:10px, right:12px을 주니까 기준점(input-box)에서 top만큼 10px, 오른쪽으로부터 12px만큼 이동한 것을 볼 수 있다.

✅ fixed

무조건 화면을 기준으로 위치를 잡을 때(고정시킴)

fixed는 absolute 속성값과 마찬가지로 문서의 흐름과 상관없이 위치를 결정한다.
하지만 position:relative인 제일 가까운 부모 혹은 조상 요소가 아닌 브라우저 창이 기준이 된다.
따라서 브라우저 창을 어디로 스크롤 하더라도 계속 고정되어 표시되게 된다.
주로 내비게이션 바를 고정시키는 용도로 사용한다.

기준점 : 브라우저 왼쪽 위 꼭짓점

아래 예시를 참고해보자.

<!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" />
    <style>
      body {
        background-color: #eee;
        height: 800px;
        padding-top: 48px;
      }

      header {
        position: fixed;
        left: 0;
        right: 0;
        top: 0;
        height: 48px;
        background-color: rgba(45, 45, 45, 0.95);
      }

      header > img {
        position: absolute;
        left: 50%;
        margin-left: -10px;
      }

    </style>
  </head>
  <body>
    <header>
      <img  width="20px" height="48px" src="https://www.apple.com/ac/globalnav/4/en_US/images/globalnav/apple/image_small.svg" alt="애플로고"/>
    </header>
  </body>
</html>

위의 absolute와 동일하게, fixed의 속성을 가지는 요소에도 left: 0; right: 0; top: 0; 속성값을 이용하여 위치시켜야 한다.

참조 >
https://developer.mozilla.org/ko/docs/Web/CSS/position
https://www.youtube.com/watch?v=_uYY1oB8yec

양주영

뚜벅뚜벅

이전 포스트

[css] transition 변화 속성

다음 포스트