Потому что этот позиция блока изменятся по отношению к картинке, когда изменяешь ширину экрана.
к примеру в html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<LINK href="css/Untitled-2.css" rel="stylesheet"
type="text/css">
</head>
<body>
<div align="center" style=" max-width: 800px; min-height: 800px;"><img src="image/meb_personal.png""/>
<div id="v2">
<b class="v1">
</b><b class="v2"></b><b class="v3"></b><b class="v4"></b><b class="v5"></b>
<div class="text">
<h1>Мебель</h1>
</div>
<b class="v5"></b><b class="v4"></b><b class="v3"></b><b class="v2"></b><b class="v1"></b>
</div>
</div>
</body>
</html>
в css
* {margin: 0; padding: 0}
body {
font: 14px/17px "Trebuchet MS", tahoma, arial;
text-align: justify;
background: #FFCCFF;
}
a {color: #0094D6}
p {
text-align: center;
margin-top: 30px;
font-weight: bold;
font-size: 13px;
}
#v1, #v2, #v3 {
width: 20%;
height: 2%;
margin-top: -20%;
margin-left: -5%;
min-width: 200px;
}
h1 {
font-size: 20px;
font-weight: normal;
text-align: center;
padding: 9px 0 14px;
}
#v1 h1 {color: #F40000;}
#v2 h1 {color: #DFDF00;}
#v3 h1 {color: #00AA00;}
.text {
border: 1px solid #B0BCC2;
border-width: 0 1px;
padding: 5px 10px;
background: #FFFFFF;
}
.v1, .v2, .v3, .v4, .v5 {
height: 1px;
font-size: 1px;
display: block;
overflow: hidden;
border: 1px solid #B8C3C8;
border-width: 0 1px;
background: #FFFFFF;
}
.v1 {margin: 0 5px; background: #B8C3C8; /*border: #000000 1px solid;*/}
.v2 {margin: 0 3px; border-width: 0 1px;}
.v3 {margin: 0 2px;}
.v4 {margin: 0 1px;}
.v5 {margin: 0 1px;}
