CSS Position
Position : 위치를 배치하는 속성
※ Tip : 위치 기준점을 모르겠으면 0,0 으로 이동해서 확인
| 속성 | 위치 속성 | 기준 |
| static | 기본값, 위치 속성 비활성화 | |
| relative | 위치 속성 활성화 | 원래 있던 위치 |
| absolute | 위치 속성 활성화 | postion이 static이 아닌 부모 부모가 없거나, 부모가 전부 static일 경우 body태그를 기준 |
| fixed | 위치 속성 활성화 | 부모 무시, 스크롤 무시 |
▶ 연습
static 속성, relative 속성 비교
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div>div{
width: 100px;
height: 100px;
background-color: lightgray;
border: 1px solid black;
}
#static{
top: 20px;
left: 15px;
}
#relative{
position: relative;
top: 20px;
left: 20px;
}
/* #parents{
position: relative;
} */
/* #absolute{
position: absolute;
top: 20px;
left: 20px;
} */
/* #fixed{
position: fixed;
top: 20px;
left: 20px;
} */
</style>
</head>
<body>
body태그 안
<div id="parents">
parents 태그 안
<div id="static">static</div>
<div id="relative">relative</div>
<!-- <div id="absolute">absolute</div> -->
<!-- <div id="fixed">fixed</div> -->
</div>
</body>
</html>
▶ 연습
static 속성, relative 속성, absolute 속성 비교
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div>div{
width: 100px;
height: 100px;
background-color: lightgray;
border: 1px solid black;
}
#static{
top: 20px;
left: 15px;
}
#relative{
position: relative;
top: 20px;
left: 20px;
}
#parents{
position: relative;
}
#absolute{
position: absolute;
top: 20px;
left: 20px;
}
/* #fixed{
position: fixed;
top: 20px;
left: 20px;
} */
</style>
</head>
<body>
body태그 안
<div id="parents">
parents 태그 안
<div id="static">static</div>
<div id="relative">relative</div>
<div id="absolute">absolute</div>
<!-- <div id="fixed">fixed</div> -->
</div>
</body>
</html>
▶ 연습
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div>div{
width: 100px;
height: 100px;
background-color: lightgray;
border: 1px solid black;
}
#static{
top: 20px;
left: 15px;
}
#relative{
position: relative;
top: 20px;
left: 20px;
}
#parents{
position: relative;
}
#absolute{
position: absolute;
top: 20px;
left: 20px;
}
#fixed{
position: fixed;
top: 20px;
left: 20px;
}
</style>
</head>
<body>
body태그 안
<div id="parents">
parents 태그 안
<div id="static">static</div>
<div id="relative">relative</div>
<div id="absolute">absolute</div>
<div id="fixed">fixed</div>
</div>
</body>
</html>
▶ 실습
화면을 확대, 축소하거나 스크롤을 움직여도 화면 모서리에 고정되어 있는 사각형 4개 만들기
더보기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 100px;
height: 100px;
position: fixed;
}
#red{
background-color: red;
top:0px;
left:0px;
}
#yellow{
background-color: yellow;
top:0px;
right:0px;
}
#blue{
background-color: blue;
bottom:0px;
left:0px;
}
#green{
background-color: green;
bottom:0px;
right:0px;
}
</style>
</head>
<body>
<div id="red"></div>
<div id="yellow"></div>
<div id="blue"></div>
<div id="green"></div>
</body>
</html>'HTML CSS JS' 카테고리의 다른 글
| 자바스크립트 입출력, 변수 (JavaScript input, output, variable) (0) | 2023.01.11 |
|---|---|
| CSS 선언 방식 (0) | 2023.01.10 |
| CSS Flex (0) | 2023.01.09 |
| CSS margin, padding, box-sizing, border (0) | 2023.01.08 |
| CSS display (0) | 2023.01.08 |
댓글