Position을 활용한 CSS 레이아웃

November 13, 2019 CSS

Position 개념

position이란, 요소의 위치를 정의하는 CSS의 프로퍼티로써, top, bottom, left, right와 함께 요소의 위치를 지정할 때 사용된다.

static

[1] 특징

position의 default 값으로써, position을 지정하지 않은 것과 동일하게 작동한다.
요소를 배치하는 기본적인 순서에 따라 위 -> 아래, 왼쪽 -> 오른쪽 순서에 따라 배치가 된다.
position의 적용된 요소의 부모요소가 존재한다면, 해당 요소는 부모요소의 기준으로 위치가 배치된다.
부모요소에서의 width의 100%를 갖고, height는 auto가 적용된다.(line-height로 부모요소와 동일한 height를 가질수 있다.)
top, bottom, left, right를 같이 사용할 수가 없고, 사용을 해도 무시된다.
기본적으로 position:static;을 사용하는 일은 거의 없다.

[2] 사용방법

relative

[1] 특징

기본 위치(static으로 지정되었을 때의 위치)를 기준으로 top, bottom, left, right를 사용하여 위치를 이동시킨다.(static과 동일)
즉, static과 같이 부모요소가 있을 경우, 부모요소의 위치를 기준으로 위치가 배치된다.(부모요소의 width의 100%, height는 auto)
이때, top, bottom, left, right를 사용하여 부모요소로부터 상/하/좌/우 방향으로 위치가 이동된다.
static과의 유일한 차이점은 top, bottom, left, right를 사용하여 위치를 이동시킬 수 있다는 점이다.

[2] 사용방법

absolute

[1] 특징

position에서 relative, absolute, fixed 중 1개가 적용되어 있는 부모요소 또는 그 상위요소를 기준으로 top, bottom, left, right를 사용하여 위치를 이동시킨다.
이때, 부모 또는 그 상위 요소가 static인 경우, document body를 기준으로 top, bottom, left, right를 사용하여 위치하게 된다.
부모 요소를 배치의 기준으로 하기 위해서는 부모 요소에 position:relative;를 적용해야한다.
또한, 다른 요소가 먼저 위치를 점유하고 있어도 position:relative;를 적용한 요소는 뒤로 밀리지 않고 다른 요소를 덮어쓴다.
absolute 선언 시, block 요소의 width는 inline 요소와 같이 content에 맞게 변화되므로 적절한 width를 지정하여야 한다.

[2] 사용방법

relative v. absolute

[1] relative와 absolute의 차이점

position: relative; -> 기본위치(부모요소가 있을 경우, 부모요소)를 기준으로 위치한다.
position: absolute;
- 부모요소에 relative, absolute, fixed 중 1개가 적용되어 있는 경우 -> 부모를 기준으로 위치한다.
- 부모요소나 그 상위요소에 static 또는 아무것도 적용된 것이 없는 경우 -> document body를 기준으로 위치한다.(부모 요소의 영역을 벗어나 자유롭게 어디든지 위치할 수 있다.)

[2] 사용방법

fixed

[1] 특징

부모 요소와 관계없이 브라우저의 viewport를 기준으로 top, bottom, left, right를 사용하여 위치를 이동시킨다.(특정 위치에 고정시킬 때 사용)
스크롤이 되더라도 화면에서 사라지지 않고 항상 같은 곳에 위치한다.
fixed를 적용한 block 요소의 width는 inline 요소와 같이 content에 맞게 변화되므로 적절한 width를 지정하여야 한다.

[2] 사용방법

position 사용 예시

[1] position: absolute;

footer를 다른 요소 위에 올려놓고 싶을 경우

이때, block 요소의 width를 적절히 지정해야한다.

// HTML
<footer>© Copyright</footer>

// CSS
footer {
  position: absolute; // 다른 요소(aside 등) 위에 올릴 수 있다.
  height: 60px;
  width: 100%;
  padding: 0 25px;
  line-height: 60px;
}

[2] position: fixed;

header를 최상단에 고정시키고 싶을 경우

이때, 부모요소 신경 안쓰고, viewport 기준으로 배치가 가능하고, block 요소의 width를 적절히 지정해야한다.

// HTML
<header>
  <nav>
    <ul class="nav-items">
      <li><a href="#home">Home</a></li>
      <li><a href="#projects">Projects</a></li>
      <li><a href="#contact">Contact</a></li>
      <li><a href="#about">About</a></li>
    </ul>
  </nav>
</header>

// CSS
header {
  position: fixed;
  top: 0;
  width: 100%;
  height: 60px;
  z-index: 2000;
}