-
1.static
static은 초기값으로 위치를 지정하지 않을때와 똑같다 즉 위치를 변경시켜도 변경되지않는다.
<html> <head> <title>Home</title> <style> .one{ width:100px; /* position:static; */ background-color:green; position:static; } .two{ width:100px; /* position:static; */ background-color:blue; position:static; left:100px; } .three{ width:100px; /* position:static; */ background-color:red; position:static; left:200px; } </style> </head> <body> <p class='one'>one</p> <p class='two'>two</p> <p class='three'>three</p> </body> </html>
static결과 2.relative(이동을 시킬꺼면 relative)
위치를 계산할 때 static의 원래 위치부터 계산합니다. 즉 어떠한 위치변화에도 관여없이 그냥 기본값에서 작성된 px만큼만 이동한다.
<html> <head> <title>Home</title> <style> .one{ width:100px; /* position:static; */ background-color:green; position:relative; } .two{ width:100px; /* position:static; */ background-color:blue; position:relative; left:100px; } .three{ width:100px; /* position:static; */ background-color:red; position:relative; left:200px; } </style> </head> <body> <p class='one'>one</p> <p class='two'>two</p> <p class='three'>three</p> </body> </html>
relative 결과 absolute
가장 가까운 상위 요소를 기준으로 위치가 결정됨
absolute 
absolute fixed(화면에 고정된 위치 절대안변함)
상위요소의 영향을 받지 않고 위치를 결정함
웹페이지에서 항상 따라다니는 광고나 공지를 설정할때 이 속성을 사용함
'css' 카테고리의 다른 글
태그 다중 style속성 (0) 2021.06.08 position (0) 2021.06.06 width,height,vw,vh (0) 2021.06.06 css border (0) 2021.06.06 인라인,블록 (0) 2021.06.06