<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>relative 배치</title>
<style>
div {
display : inline-block;
height : 50px;
width : 50px;
border : 1px solid lightgray;
text-align : center;
color : white;
background : red; }
#down:hover {
position:relative;
left : 20px;
top : 20px;
background : green;
}
#down2:hover {
position:relative;
left : 40px;
top : -40px;
background : gray;
}
#up:hover {
position : relative;
right : 20px;
bottom : 20px;
background : green; }
#up2:hover {
position : relative;
right : 20px;
bottom : -20px;
background : gray; }
</style>
</head>
<body>
<h3>상대배치, relative</h3>
<hr>
<div>T</div>
<div id="down">h</div>
<div id="up2">a</div>
<div>n</div>
<div id="up">k</div>
<div id="down2">s</div>
</body>
</html>
꾸준함의 가치를 믿는 개발자