5) 속성-position

들어가기 전에

요소의 레이아웃을 설정하는 대표적인 속성은 position 속성입니다.

position은 요소의 위치를 원하는 곳으로 이동할 수 있게 합니다.

position을 사용하기 위해서는 요소를 이동시키기 위한 좌표 속성인 offset에 대해서도 알아야 합니다.

position과 offset 속성을 잘 활용하면 더 다양하고 화려한 레이아웃을 구현할 수 있습니다.

핵심키워드

position
offset

학습하기

position 속성

요소의 위치를 정하는 방법을 지정하는 속성입니다.

기본 값 : static

position: static | absolute | fixed | relative | sticky | initial | inherit;

< 속성 값 >

static	Normal-flow 에 따라 배치되며 offset 값이 적용되지 않는다. (기본값)
absolute	부모 요소의 위치를 기준으로 offset 에 따라 배치된다. 부모가 position 값(static 제외)을 가지면 offset 값의 시작점이 된다. * 부모의 position 값이 static 인 경우 조상의 position 값이 static이 아닐 때까지 거슬러 올라가 기준으로 삼습니다. Normal-flow의 흐름에서 벗어난다.
fixed	뷰포트(브라우저의 창)를 기준으로 offset 에 따라 배치된다. 즉, 화면 스크롤에 관계없이 항상 화면의 정해진 위치에 정보가 나타난다. 부모의 위치에 영향을 받지 않는다.
relative	자신이 원래 있어야 할 위치를 기준으로 offset 에 따라 배치된다. 부모의 position 속성에 영향을 받지 않는다. Normal -flow의 흐름에 따른다. 주변 요소에 영향을 주지 않으면서 offset 값으로 이동한다

Normal-flow 란? 일반적인 상황에서 각의 요소들의 성질에 따라 배치 되는 순서(흐름)를 뜻합니다. 예를 들면, block 레벨 요소들은 상하로 배치되고, inline 레벨 요소들은 좌우로 배치되는 것을 말합니다.

offset(top/left/bottom/right)

top|bottom|left|right: auto|length|initial|inherit;

top: 50%;
left: 10px;
bottom: -10px;
right: auto;

offset의 %단위 사용 이전에 padding과 margin에서 % 값을 적용할 때, 상하좌우 방향에 관계없이 가로 사이즈를 기준으로 %값을 계산된다고 배웠습니다. 그러나 offset은 top, bottom (상하) 는 기준이 되는 요소의 height 값 left, right (좌우) 는 width값에 대하여 계산되어집니다.

코드실습

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>position</title>
  <style>
    .sibling {
      padding: 5px;
      background-color: #eee;
      text-align: center;
    }

    .parent {
      border: 1px dashed #aaa;
      padding: 10px;
    }

    .child,
    .child_offset {
      width: 60px;
      height: 60px;
      padding: 20px;
      background-color: #dc3636;
      text-align: center;
      color: #fff;
      font-weight: bold;
      border: 1px solid #333;
    }

    .child_offset {
      background-color: #3677dc;
    }

    .static {
      position: static;
    }

    .relative {
      position: relative;
    }

    .static {
      position: static;
    }

    .absolute {
      position: absolute;
    }

    .fixed {
      position: fixed;
    }
  </style>
</head>
<body>
  <h1>position (Offset 미지정)</h1>
  <h2>static (기본)</h2>
  <div class="parent">
    <div class="sibling">Sibling 1</div>
    <div class="child static">static</div>
    <div class="sibling">Sibling 2</div>
  </div>

  <h2>relative</h2>
  <div class="parent">
    <div class="sibling">Sibling 1</div>
    <div class="child relative">relative</div>
    <div class="sibling">Sibling 2</div>
  </div>

  <h2>absolute</h2>
  <div class="parent">
    <div class="sibling">Sibling 1</div>
    <!-- absolute, fixed는 inline요소일때 display:block으로 변경시킴. inline-block 값을 임의 지정했을 때는 그 값을 유지함. -->
    <span class="child absolute">absolute</span>
    <div class="sibling">Sibling 2</div>
  </div>

  <h2>fixed</h2>
  <div class="parent">
    <div class="sibling">Sibling 1</div>
    <!-- 현재 fixed는 offset값이 없어 뷰포트 밖으로 밀려나오면서 화면 아래로 사라짐 -->
    <div class="child fixed">fixed</div>
    <div class="sibling">Sibling 2</div>
  </div>


  <h1>position (Offset 지정)</h1>
  <h2>static - </h2>
  <div class="parent">
    <div class="sibling">Sibling 1</div>
    <div class="child_offset static" style="top: 40px; right: 40px;">static <br>top: 40, left: 40</div>
    <div class="sibling">Sibling 2</div>
  </div>

  <h2>relative</h2>
  <div class="parent">
    <div class="sibling">Sibling 1</div>
    <div class="child_offset relative" style="top: 40px; left: 40px;">relative <br>top: 40, left: 40</div>
    <div class="sibling">Sibling 2</div>
  </div>

  <h2>absolute - parent relative</h2>
  <div class="parent relative">
    <div class="sibling">Sibling 1</div>
    <div class="child_offset absolute" style="top: 40px; left: 80px;">absolute<br>top: 40, left: 80</div>
    <div class="sibling">Sibling 2</div>
  </div>

  <h2>fixed</h2>
  <!-- 부모가 fixed여도 별개로 위치함 -->
  <div class="parent">
    <div class="sibling">Sibling 1</div>
    <div class="child_offset fixed" style="top:100px;left:80%;">fixed<br>top:100, left:80%</div>
    <div class="sibling">Sibling 2</div>
  </div>
</body>
</html>

생각해보기

position 속성의 값에는 sticky라는 값도 있습니다. 이 값은 지원 범위가 제한적이라 잘 사용하지는 않지만 환경이 허락된다면 아주 유용한 값입니다. 여러분들이 직접 sticky에 대해 한번 공부해보세요.

참고자료

CSS position property
https://www.w3schools.com: Well organized and easy to understand Web building tutorials with lots of examples of how to use HTML, CSS, JavaScript, SQL, PHP, and XML.

position
https://developer.mozilla.org: The position CSS property specifies how an element is positioned in a document. The top, right, bottom, and left properties determine the final location of positioned elements.

비전공자를 위한 HTML/CSS