position 은 특정 요소의 위치 속성을 지정해준다.
static은 relative 포지션을 사용하는 요소의 기준이 되는 속성
relative 다른 요소와 연관 되어 움직이는 속성( static 이 없으면 다른 relative를 기준으로 삼음)
absolute : 부모를 기준으로 절대값으로 움직이는 속성
fixed : 보이는 화면에서 고정되어 보여줌(스크롤을 내려도 따라온다.)
static은 잘 사용하지 않지만 다른 요소는 자주 사용하므로 꼭 기억해두자.
<html>
<head>
<meta charset="UTF-8">
<title>Position</title>
<link rel="icon" href="img/btn.png">
<style>
div{
width: 200px;
height: 200px;
text-align: center;
}
div.static{
position: static;
background-color: aqua;
}
/*원래 기준은 화면 최상단 좌측인데*/
/*기준이 static 설정한 박스로 바뀜*/
div.relative{
position: relative;
background-color: coral;
top:1000px;
left: 200px;
}
div.absolute{
position: absolute;
width:100px;
height: 100px;
border: 3px solid red;
/*0%로 주면 부모 요소와 겹치는걸 볼 수 있다.*/
top: 25%;
left: 25%;
}
div.fixed{
position: fixed;
width:100px;
height: 100px;
background-color: khaki;
top: 10%;
right: 10%;
}
</style>
</head>
<body>
<!--relative의 기준이 되는 속성-->
<!--static이 없으면 처음 생성된 relative를 기준으로 삼는다.-->
<div class="static">posision:static</div>
<!--다른 요소와 연관되어 움직인다.-->
<div class="relative">posision:relative
<!--부모를 기준으로 움직임-->
<!--아래의 예의 부모는 relative가 된다.-->
<!--하지만 정렬을 하면 부모 인자를 무시하고 겹쳐서 나온다.-->
<div class="absolute">position<br/>absolute</div>
</div>
<!--보이는 화면에서 고정되어 보여줌(스크롤을 내려도 따라온다.)-->
<div class="fixed">position:fixed</div>
</body>
</html>
우측의 스크롤을 보면 내려올때 fixed의 상자가 따라오는 것을 볼 수 있다.
'HTML, CSS, JavaScript, jQuery > 03.CSS' 카테고리의 다른 글
| [CSS]03-11.sprite image, 이미지를 애니메이션 처럼 표현 (0) | 2018.10.18 |
|---|---|
| [CSS]03-10.z-index, opacity (화면 순서, 투명도 조절) (0) | 2018.10.18 |
| [CSS]03-08.clear(float 정렬 줄 넘김) (0) | 2018.10.17 |
| [CSS]03-07.display, visibility, 요소 숨기기 / 보이기 / 삭제 / 블록 / 인라인 (0) | 2018.10.17 |
| [CSS]03-06.배운 내용 활용해서 사이트의 메뉴 바 만들기 (0) | 2018.10.17 |