[TIL] #08 CSS | Position - absolute

DamHo Bae·2021년 2월 16일
0

포지션에 대해 알아보자


나는 [Pre-course] HTML, CSS를 하면서 포지션에 대한 문제를 풀고 있었다.
복잡한 레이아웃을 만들어줄때 position을 사용한다.


📢 Position

position 속성 : static, relative와 absolute, fixed가 있다.
position과 같이 쓸 수 있는 css로는 위치값을 지정하는 top, bottom, left, right와 순서를 지정하는 z-index가 있다.


🚀 relative

relative 말 그대로 상대 위치이다.
기본 위치를 기준으로 좌표 프로퍼티를 사용하여 위치를 이동한다.
div2에 position: relative의 top,left에 각각 16px를 할당하면
아래와 같이 position: static이 가질 위치보다 위에서 16px, 왼쪽에서 16px만큼 떨어지게 된다.


포지션 공부하면서 알게된점 ?

이 처럼 부모 클래스를 sc라고 적용했고,
부모 클래스 => position: relative를 사용해야하고
자식 => position: absolute를 사용해야 한다는걸 알게 되었다.

결과 :

profile
Frontend Developer

0개의 댓글