<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
.box
{
width: 100px;
height: 100px;
float: left;
margin-left:10px;
position:relative;
}
.red
{
background-color: red;
}
.green
{
background-color: green;
}
.blue
{
background-color: blue;
}
</style>
</head>
<body>
<div class="box red">
</div>
<div class="box green">
</div>
<div class="box blue">
</div>
</body>
</html><!DOCTYPE html>
<html>
<head>
<title></title>
<style>
.box
{
width: 100px;
height: 100px;
float: left;
margin-left:10px;
position:relative;
}
.box1
{
width: 100px;
height: 100px;
position:absolute;
top:50px;
left:50px;
}
.red
{
background-color: red;
}
.green
{
background-color: green;
}
.blue
{
background-color: blue;
}
</style>
</head>
<body>
<div class="box">
<div class="box1 red">
</div>
</div>
<div class="box green">
</div>
<div class="box blue">
</div>
</body>
</html>.red{
position:relative; // тогда объект будет двигаться относительно текущей позиции. Если поставить absolute, а у родительского блока стоит relative, тогда объект будет двигаться относительно родительского блока. Если же у родителя postion не задан, то при position:absolute объект будет двигаться относительно экрана и при значения top:0; left:0 займет верхний левый угол
top:20px или 20%;
right:20px или 20%;
}
Средний
