[Frontend] CSS - Position

Alex of the year 2020 & 2021·2020년 6월 23일
0

HTML, CSS

목록 보기
3/5
post-thumbnail

코딩이란 무릇
작성한 순서대로 페이지에 그려지는 것이라 생각했거늘
html 코드와 상관 없이 그리고 싶은 어느 위치에나 요소를 그릴 수 있게해주는
신박한 기능이 있다

CSS - position

복잡한 레이아웃을 만들어주는
Position 프로퍼티

static
relative
absolute
fixed

중 많이 사용하는 relative와 absolute, fixed에 대해 알아보자

Position: relative;

position: relative;
이 자체만으로는 어느 위치로의 이동이 발생하지 않는다
top, right, bottom, left 프로퍼티를 사용해야 뭔가 이동이 발생

.relative {
  position: relative;
}
.top-20 {
  top: -20px;
  left: 30px;
}

relative클래스를 부여받은 객체(이하 r 객체)에 대해 position: relative;를 적용한 후,
top-20클래스를 부여받은 객체(이하 t20객체)가
r 객체를 기준으로 어떤 움직임을 보일 것인지 지정한 식이다

t20객체는 relative에서 위로 20px, 왼쪽에서 30px만큼 떨어지게 된다
(주의: 마이너스 값을 주면 아래로 떨어지지 않고, 위로 올라가게 된다)

Position: absolute;

이름에서 느껴지듯 절대적인 위치에 둘 수 있다 단, 특정 부모에 대해 절대적이다
부모 중 position이 relative, fixed, absolute 하나라도 있다면
그 부모에 대해(그 부모 속에서) 절대적!

주의! absolute 사용 시,
절대적으로 움직이고 싶은 부모에게 position: relative; 를 부여하면 된다

p {
  margin: 0;
  background-color: yellow;
}
.absolute {
  position: absolute;
}
.right-0 {
  right: 0;
  bottom: 0;
}

이 코드에서는
absolute 클래스가 부모 클래스로 기능하고 있는 것을 알 수 있고, (position: absolute;)
right-o 클래스를 부여받은 객체는 부모인 absolute 클래스 기준으로 바닥과 오른쪽에 딱 붙어 생성되게 된다 (값이 0이니까)

Position: fixed;

말그대로 고정되었다는 뜻
absolute는 relative를 가진 부모가 필요했는데,
fixed는 필요 없음

눈에 보이는 브라우저 화면 크기만큼 화면 내에서만 움직임

.coupon {
  position: fixed;
  right: 0;
  bottom: 0;
  background-color: red;
  color: white;
  font-size: 20px;
}

이런 식으로 작성된 코드는 브라우저 창 내에서
고정되어 있는 것을 확인 가능
(스크롤을 내려도 혼자 그 자리에 가만히 있음)

참고하면 정말 좋은 사이트:
https://ko.learnlayout.com/position-example.html

profile
Backend 개발 학습 아카이빙 블로그입니다. (현재는 작성하지 않습니다.)

0개의 댓글