<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 150px;
height: 150px;
}
#div1{
background-color: red;
}
#div2{
background-color: blue;
position: relative;
top: 75px;
}
#div3{
background-color: yellow;
position: absolute;
top: 75px;
}#div4{
background-color: green;
position: fixed;
bottom: 10px;
right: 10px;
}
/*
태그의 위치를 변형할 수 있는 속성은 position
1) static : 기본값, 내가 작성한 코드의 순서대로 태그가 생성된다.
2) relative : 특정 태그에게 새로운 층을 부여해서 위치를 이동 시킨다.
- 원래 태그가 생성된 위치를 기반으로 움직인다. (중요)
3) absolute : 특정 태그에게 새로운 층을 부여해서 위치를 이동 시킨다.
- 화면 상단의 점을 시작점으로 시작한다. -> 원래 위치는 중요하지 않다.
- 부모태그가 static 경우에는 화면 최상단 기준
- 부모태그가 relative, absolute, fixed 라면 부모태그가 기준이 된다.
- div 태그는 서로 포함되는 경우가 많기 때문에, 부모태그에 relative로 처리해 줘야, 포함관계를 표시 가능
4) fixed : 화면의 특정 부분에 태그를 고정하겠다.
- 화면에 리모컨, 최상위버튼, 설정버튼 등 사용자가 스크롤을 내려도 화면에 고정이 되는 내용
*/
#parentDiv{
width: 500px;
height: 500px;
background-color: black;
position: relative;;
}
#childDiv{
background-color: yellow;
position: absolute;
top: 30px;
}
</style>
</head>
<body>
<!-- <div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
<div id="div4"></div> -->
<br><br><br><br><br><br><br><br><br><br>
<div id="parentDiv">
<div id="childDiv"></div>
</div>
</body>
</html>
개발자