我一直要求创建中集成了水印的布局。它必须放置在这样一种方式，左点是在左侧栏DIV，顶部是透明的横幅图像，并且该底部部分是背景图像的内容DIV。
我想按我的jsfiddle here CSS绝对定位：
<!doctype html>
<div id="all">
<div id=leftside>
</div><!-- leftside -->
<div id="banner">
</div> <!-- banner -->
<div id="rightside">
<div id="rightinner">
<h3>My Account</h3>
<input type="text" id="Login"/>
<input name="Go" type="button" id="btnLogin" value="Go"/><br/>
</div>
<!-- rightinner -->
</div><!-- rightside -->
<div id="nav">
<ul>
<li><a href="#">menu item1</a></li>
<li><a href="#">Strategy & Performance</a></li>
<li><a href="#">Documents</a></li>
<li><a href="#">Research & Insights</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div><!-- nav -->
<div id="content">
</div><!-- content -->
<div id="footer">
<div id="leftfooter">
© my copyright
</div><!-- leftfooter -->
<div id="rightfooter">
<a href="#">Privacy Notice</a>
</div><!
</div>
<!-- footer -->
</div>
<!-- all -->
然而，绝对定位不允许我去水印的作品适当地配合在一起足够紧。这是一个例子，其中切片水印切片作为标题图像的一部分。
我已经附加的完成主页应该是什么样子一个样机：什么是最CSS友好和有针对性地确保水印DIV是在背景颜色的顶部透明的，并且可以在横幅中可以看出，左侧边栏和内容的DIV？
更新4/1：我已经修改了CSS here如下：
@charset "utf-8";
/* CSS Document */
body{
background-color: #003a63;
font-family: Calibri, Verdana, sans-serif;
font-size: 12pt;
width: 100%
}
html{
width:100%;
}
h3{
color: white;
}
#all {
width: 1024px;
}
#banner {
background-image: url(images/banner.png);
background-repeat: no-repeat;
height: 367px;
width: 815px;
position: absolute;
left: 232px;
top: 0px;
z-index: 999;
}
#watermarkCont{
background-color: #003a63;
width: 100%;
height: 100%;
position: absolute;
top: 0;
z-index: 25;
}
#watermark{
background-image: url(images/ghwatermark.png);
width: 576px;
height: 517px;
position: absolute;
left: 50%;
margin-left: -200px;
z-index: 25;
}
#content {
background-image: url(../images/bgcontent.png);
background-repeat: no-repeat;
height: 454px;
width: 827px;
position: absolute;
left: 228px;
top: 412px;
background-color: #FFF;
z-index: 1;
}
#leftside {
height: 895px;
width: 220px;
position: absolute;
z-index: 1;
}
#rightside {
background-color: light-gray;
height: 957px;
width: 211px;
position: absolute;
left: 1050px;
top: 0px;
z-index: -25;
}
#nav {
background-color: #c7940d;
list-style-type: none;
font: Calibri;
font-size: 12pt;
font-weight: bold;
position: absolute;
left: 231px;
top: 368px;
width: 822px;
height: 42px;
margin: 0;
padding: 0;
z-index: 999;
}
#nav ul{
margin:0;
padding:0;
}
#nav ul li{
display: inline;
font-weight: bold;
color: #FFF;
}
#rightinner {
background-color: #003a63;
height: 130px;
width: 220px;
padding: 1px 1px 1px 1px;
}
#footer {
height: 105px;
wiedth: 833px;
position: absolute;
left: 227px;
top: 864px;
width: 825px;
color: #003a63;
background-image: url(images/footerbg.png);
}
#rightfooter {
float: right;
}
#leftfooter {
float: left;
width: 225px;
}
这更接近我所需要的。但是，我不知道如何调整有问题的elemetns的z索引值，使它看起来像样机。任何人都可以提供一些建议值？我的理解是，z-index的值越高，图像越高的“堆栈”。那是对的吗？
这是我的建议：
让你的身体和HTML的100％的宽度。创建一个新的事业部将被称为像水印的容器，并给它100％的宽度绝对位置。内部的DIV，使另一个叫水印，并给它的位置是绝对的，但你可以给它一个左：50％，然后负左缘把它放在你想要的确切点。
这将确保水印始终是摆在正确的位置，无论在屏幕尺寸。
下面的代码：
body, html {
width:100%;
}
#watermarkCont {
width:100%;
height:100%; //or if you want to just make this a px amount, it might not take 100% height
position:absolute;
top:0;
}
#watermark {
background-image:url("/*image*/");
width: /*whatever the image width is*/;
height: /*whatever the image height is*/;
position:absolute;
left:50%;
margin-left:-200px;
}
这种方法通常用于中心的绝对定位的元素。负左边距通常是元素的宽度的一半，但在这种情况下，你会推到左侧多，所以使它成为一个更大的负数如果需要的话。
之后，你有它放置，给每一个元素正确的z-index和你的大水印应该能够适应的地方，而不必被切割。
background-image: url(/Content/Images/logo.png);
background-repeat: no-repeat;
height: 560px;/* height of page */
background-position: 50% 50%;
background-size: 300px 300px; /* width height of Image */
padding: 16px; /* as per need */