[CSS #2] Position으로 움직여봅니다

Kayoung Kim·2021년 6월 21일

CSS TIL position

CSS

목록 보기

2/8

CSS position은 요소를 원하는 위치에 자유롭게 이동시키기 위한 속성으로 static, relative, absolute, fixed, sticky(지원하는 브라우저 많지 않음)가 있다.

Position

포지션을 쓸 때는 두 가지를 기억한다.
1) 어떤 타입을 쓸 것인지 2) 기준점이 무엇인지
=> 기준은 포지션 타입에 따라 달라진다!

Static

모든 요소의 기본값. 가장 일반적인 상태로 left, right, top, bottom 속성이 비활성화된 상태

Relative

기준점: 요소의 본래 있던 자리로 부모 태그에 의해 움직인다.
position: relative; 를 주면 요소가 붕 떠서 원래 있던 공간을 벗어나지만, 원래 있던 공간을 기억하고 있고, 부모/형제 요소도 알고 있음. 즉, 다른 요소에 영향주지 않는다.

Absolute

기준점: static이 아닌 상태의 부모, 조상 요소를 씀
float 현상과 동일한 것들이 많은데, 컨텐츠만큼의 공간을 차지하는 것, 블록으로의 변화가 있다.

Fixed

기준점: viewport(최상위)
스크롤도 무시하고 완전히 고정된다.
top/bottom, right/left property를 쓰는데 효율적으로 2개만 사용한다.

Z-index

포지션된 요소들의 수직 방향 level 위치를 알려준다.
ex) 2개의 요소가 서로 겹쳐질 때, z-index = 1, z-index = 2.. 로 레벨을 매겨 사용한다.

예제 (user-status)

CSS source code

* {
  box-sizing: border-box;
  margin: 0;
}
 
body {
  font-family: "Lato", sans-serif;
 
}
 
h1 {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  color: #273444;
}
 
.user-card {
  width: 240px;
  height: 56px;
  padding: 8px 12px;
  border: 1px solid #E5EAEF;
  border-radius: 4px;
}
 
.user-card::after {
  content: '';
  display: block;
  clear: left;
}
 
.user-photo, .user-name {
  float: left;
}
 
.user-photo {
  position: relative;
  margin-right: 12px;
}
 
.user-photo img {
  display: block;
  width: 40px;
  height: 40px;
  border-radius: 50%;
}
 
.user-name {
  padding: 8px 0;
}
 
 
.user-status {
  position: absolute;
  right: -2px;
  bottom: -2px;
}
 
.user-status {
  display: block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid #fff;
  background-color:#21D891;
}

HTML source code

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Position 1</title>
    <link href="https://fonts.googleapis.com/css?family=Lato&display=swap" rel="stylesheet" />
    <link rel="stylesheet" href="./style.css" />
  </head>
  <body>
    <div class="user-card">
      <div class="user-photo">
        <img src="./assets/user.jpg" alt="Kimbug" />
        <span class="user-status" aria-label="Active"></span>
      </div>
      <h1 class="user-name">
        Kimbug
      </h1>
    </div>
  </body>
</html>

Questions & Learned

float와 position은 어떻게 다르지?
=> float는 두 요소를 나란히 놓을 때(가로배치),
position은 특정 위치에 옮기고/고정시키고 싶을 때 사용한다.
어떤 position을 써야하지?
=> 완전히 맥락에서 떼어내서 옮겨야 한다면 absolute, 자기 위치를 유지하면서 조금식 이동하고 싶다면 relative, viewport를 기준으로 고정시켜야 한다면 fixed
이미지 태그는 display가 inline이지만 특수한 케이스로 width, height를 줄 수 있다. 하지만 전체 오차를 줄이기 위해서 block으로 바꿔주는 것이 좋다.

출처: '김버그의 HTML&CSS는 재밌다'를 학습하고 정리한 내용입니다.