position: absolute 를 주면 3차원으로 구현 가능
abspolute 를 주면 하이 엘리먼트에 명령을 받지않고 브라우져 기준으로 움직인다.
relative: 하이 엘리먼트에 명령도 받으면서 움직인다.
pixed: 를 주면 내가 줌을 주든 안주든 고정자리에서 변화 없이 고정시킬수 있다 (퀵버튼 만들때 활용)
<style>
*{
margin: 0;
padding: 0;
}
#box1{
position: absolute;
left: 100px;
width: 200px;
height: 200px;
background: red;
}
#box2{
position: relative;
top: 100px;
width: 200px;
height: 200px;
background: blue;
}
#box3{
position: fixed;
top: auto;
right: 0;
width: 200px;
height: 1000px;
background: yellow;
}
</style>
</head>
<body>
<div id="box1">
1
</div>
<div id="box2">
2
</div>
<div id="box3">
3
</div>이런 식으로 만약 내가 구현하고 싶은게 기존에 틀에 따로 띄어서 구현 하고 싶을때는 absolute 를 활용하고
기존에 틀에서 기존 명령도 받으면서 구현하고 싶을때는 ralative
고정된 위치에 구현하고 싶을 때는 fixed 를 사용하면 된다.
숙제
레이아웃 먼저 만들어 오기