CSS Position 개념정리!
2020. 11. 17. 21:11ㆍPrograming/CSS
반응형
1. realtive
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
width: 50px;
height: 50px;
margin-bottom:30px;
background: yellow;
}
article {
background-color: skyblue;
left: 50px;
top: 50px;
position: relative; /* realtive는 원래 자리에서 상대적으로 이동*/
}
</style>
</head>
<body>
<h1>CSS Position 개념정리</h1>
<article>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</article>
</body>
</html>
** realtive는 원래 자리에서 상대적으로 이동한다고 기억하면 된다! **
2. absolute (2번 box에 absolute 적용하면)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
width: 50px;
height: 50px;
margin-bottom:30px;
background: yellow;
}
article {
background-color: skyblue;
left: 50px;
top: 50px;
position: relative; /* realtive는 원래 자리에서 상대적으로 이동 */
}
#box {
left: 50px;
top: 50px;
position:absolute /* absolute 가장 가까이에 포함된 박스 안에서 이동 */
}
</style>
</head>
<body>
<h1>CSS Position 개념정리</h1>
<article>
<div>1</div>
<div id="box">2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</article>
</body>
</html>
absolute는 아이템이 담겨있는 가장 가까운 박스 기준에서 이동한다고 기억하면 된다!
(2번 박스는 article에 포함되어 있으므로 article 기준에서 이동한 것을 확인할 수 있다.)
3. fixed
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
width: 50px;
height: 50px;
margin-bottom:30px;
background: yellow;
}
article {
background-color: skyblue;
left: 50px;
top: 50px;
position: relative; /* realtive는 원래 자리에서 상대적으로 이동 */
}
#box {
left: 50px;
top: 50px;
position:fixed /* fixed는 윈도창을 기준으로 이동 */
}
</style>
</head>
<body>
<h1>CSS Position 개념정리</h1>
<article>
<div>1</div>
<div id="box">2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</article>
</body>
</html>
fixed는 박스와 상관없이 웹페이지 기준에서 이동한다고 기억하면 된다!
정리:
1. realtive는 원래 자리에서 상대적으로 이동
2. absolute는 아이템이 담겨있는 가장 가까운 박스 기준에서 이동
3. fixed는 박스와 상관없이 웹페이지 기준에서 이동
반응형
'Programing > CSS' 카테고리의 다른 글
| sticky로 메뉴바 고정하기 (0) | 2020.11.17 |
|---|---|
| CSS의 기본 규칙 (0) | 2018.09.08 |
| CSS 태그 종류 (0) | 2018.09.08 |