1. position 이해하기
- 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{
width: 200px;
height: 200px;
}
#div1{
background-color: red;
}
#div2{
background-color: yellow;
position: relative;
left: 200px;
}
#div3{
background-color: green;
position: relative;
left: 100px;
bottom: 100px;
}
</style>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
</body>
</html>
2. position과 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{
width: 200px;
height: 200px;
}
#div1{
background-color: red;
}
#div2{
background-color: yellow;
position: relative;
}
#div3{
background-color: green;
position: absolute;
top: 100px;
}
#div4{
width: 400px;
height: 400px;
background-color: blue;
position: relative;
}
</style>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
<div id="div4">
<div id="div3"></div>
</div>
</body>
</html>
728x90
반응형
'XHTML.CSS' 카테고리의 다른 글
| CSS_선언방식 (0) | 2022.06.15 |
|---|---|
| CSS_border (0) | 2022.06.15 |
| CSS_margin (0) | 2022.06.15 |
| CSS_디스플레이 (0) | 2022.06.15 |
| CSS_선택자 (0) | 2022.06.15 |