CSS : position, display 속성

윤남주·2021년 12월 28일
0
post-thumbnail

Position

static (default)
아무런 특정 포지션을 지정하지 않은 상태
top, bottom, right, left, z-index 값을 주어도 아무 변화 없음

relative
position: relative; 를 설정한 후에 아무 속성도 추가하지 않으면 그저 static과 똑같은 상태. 하지만 top, bottom, right, left, z-index 값을 지정할 수 있음. 자신의 원래 위치에서 이동.

absolute
문서 내 원래 위치에서 제거. 조상 중 position: static;이 아닌 포지션 값을 가지고 있는 요소 기준으로 움직임. top, bottom, right, left, z-index 값 지정.

fixed
문서 내 원래 위치에서 제거. 뷰포트 기준으로 위치를 잡음. top, bottom, right, left 값으로 지정된 위치에 항상 위치해 있음.




inline, inline-block, block

inline
줄바꿈이 되지 않는 인라인 요소. 내용 만큼의 영역을 차지한다. width, height 값을 줄 수 없음.

block
한 row 전체를 차지하는 요소. 기본적으로 내용만큼의 height와 전체화면만큼의 width를 가진다. width, height 값을 지정할 수 있다.

inline-block
인라인 요소처럼 작용하지만, width/height 값을 지정할 수 있다.


참고문서
CSS Inline vs Inline-Block vs Block
MDN - position

profile
Dig a little deeper

0개의 댓글