css position 속성에 대해 알아보자.중앙정렬

by 흐미 posted May 16, 2019
?

단축키

Prev이전 문서

Next다음 문서

ESC닫기

크게 작게 위로 아래로 댓글로 가기 인쇄
Extra Form

No Attached Image

position:요소를 배치할때 사용함

사용방법

예:body{position:fixed;

               top:50%;

                left:50%;}

1.static(기본값)

-중앙정렬 : margin:auto;

2.absolute(절대위치)

-다른요소의 영향을 받지않으며 웹문서 기준으로 한 위치

-부모요소에 relative,static가 있을 경우 부모요소 기준으로 위치/앞의  태그를 기준으로 위치

-left,right,top,bottom으로 위치지정

3.relative(static+absolute)상대위치

-본래의 위치가 기준이 됨

-left,right,top,bottom으로 위치지정

-px,%,auto 지정가능 (-값 지정가능)

-위치값(-left,right,top,bottom)을 지정하지 않으면 static과 같음

4.fixed(absolute+relative)고정위치

-웹브라우저 창을 기준으로 위치 고정

-스크롤시에도 지정위치고정

--left,right,top,bottom으로 위치지정

*z-index

-겹치는 순위 변경

-z-index값이 클수록 우선순위