<!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>위치속성</title>
<style>
/*
display:none 과 visibility:hidden의 공통점: 요소를 안보이게 한다.
display:none 과 visibility:hidden의 차이점:
display:none는 요소를 제거한다.
visibility:hidden는 요소는 그대로 두고 안보이게 한다.
opacity 속성: 요소의 투명도를 지정한다.(0 ~ 1)
*/
.red {
position:absolute; left:0; top:0;
width:100px; height:100vh;
background:red;
}
.green {
position:absolute; left:0; top:0;
width:100%; height:100px;
background:green;
}
.blue {
position:absolute; left:0; bottom:0;
width:100%; height:100px;
background:blue;
}
.orange {
position:absolute; right:0; top:0;
width:100px; height:100vh;
background:orange;
}
</style>
</head>
<body>
<div class="red"></div>
<div class="green"></div>
<div class="blue"></div>
<div class="orange"></div>
</body>
</html>
결과
