블록체인 2021.03.18
position:효과 3차원적으로 생각 잘하기 ===>>>(((z축으로 띄운다)))는 원리 <<매우중요!
============================================================================
/*position:absolute; 을 쓰면 겹치는 효과를 이용할수 있게된다*/ <====== <div></div>로 만든 box에다가
/*그 position:absolute를 쓰면 left:50px; 같은 효과를 쓸 수 있다*/ <====== <div></div>로 만든 box의 위치를 조정
ex) top:0px ..... right:0px ...... left:50px......
여기가 중요=====================================================================
/* postion:absolute; 브라우저를 기준으로한다...(높낮이를 처리할 때 많이 쓴다);;;
position:relative; 부모element의 특성을 따라간다(부모box를 기준으로 한다);;;
position:fixed; 스크롤바를 움직여도 계속 fix되는 박스를 만들수 있다;;;
*/
============================================================================
ex)
<!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>
*{
margin:0;
padding:0;
}
#box1{
width:400px;
height: 200px;
background-color: gray;
}
#box2{
width:400px;
height: 200px;
background-color:green;
}
#box3{
width:300px;
height: 200px;
background-color: black;
}
</style>
</head>
<body>
<div id="box1">
</div>
<div id="box2">
<div id="box3">
</div>
</div>
</body>
</html>이걸로 원리 까먹지 않기.
어? 위에 블럭이 있네? ===>>> absolute를 줘도 그 윗 블록으로 올라가지는 못함. (z축으로 띄워지는 거라고 생각하기)