このサンプルboxのcss↓↓ 基準はウィンドウの左上

.sample2{
position: absolute;
top: 200px;
left: 550px;
width: 300px;
height: 100px;
background-color: #fcf;
}

このサンプルboxのcss↓↓値を%で指定基準はウィンドウの左上

.sample3{
position: absolute;
top: 50%;
left: 40%;
width: 300px;
height: 100px;
background-color: #cef;
}

sample1

↑↑こちら(sample1)のcss
ウィンドウの左上が基準、width: 100%;が記述してある。

.sample1{
position: absolute;
top: 50px;
left: 0px;
width: 100%;
}
.text1{
height: 25px;
color:#fff;
text-align: center;
padding: 2px;
background : url(画像のurl) repeat-x;
}

<html>
<body>
<div class="sample1">
<p class="text1">sample1</p>
</div>
</body>
</html>