65 lines
1.1 KiB
HTML
65 lines
1.1 KiB
HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
|
|
"http://www.w3.org/TR/html4/strict.dtd">
|
|
<html>
|
|
<head>
|
|
<style>
|
|
.area{
|
|
position:absolute;
|
|
border:1px solid orange;
|
|
height:200px;
|
|
width:100px;
|
|
}
|
|
.item{
|
|
position:absolute;
|
|
border:1px solid pink;
|
|
height:100px;
|
|
width:100px;
|
|
}
|
|
#areaA{
|
|
top:50px;
|
|
left:50px;
|
|
}
|
|
#areaB{
|
|
top:150px;
|
|
left:200px;
|
|
}
|
|
#areaC{
|
|
top:50px;
|
|
left:350px;
|
|
}
|
|
#areaD{
|
|
top:10px;
|
|
left:750px;
|
|
}
|
|
|
|
#itemA{
|
|
top:500px;
|
|
left:50px;
|
|
}
|
|
#itemB{
|
|
top:650px;
|
|
left:10px;
|
|
}
|
|
#itemC{
|
|
top:800px;
|
|
left:10px;
|
|
}
|
|
#itemD{
|
|
top:1000px;
|
|
left:100px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="area" id="areaA">Area A <br/>{50, 50}</div>
|
|
<div class="area" id="areaB">Area B <br/>{150, 200}</div>
|
|
<div class="area" id="areaC">Area C <br/>{50, 350}</div>
|
|
<div class="area" id="areaD">Area D <br/>{10, 750}</div>
|
|
|
|
<div class="item" id="itemA">Item A <br/>{500, 50}</div>
|
|
<div class="item" id="itemB">Item B <br/>{650, 10}</div>
|
|
<div class="item" id="itemC">Item C <br/>{800, 10}</div>
|
|
<div class="item" id="itemD">Item D <br/>{1000, 100}</div>
|
|
|
|
</body>
|
|
</html> |