让层位置固定不随滚动条拖动

2016-02-22    编辑:Crese     点击(

<html>
<head>
<style type="text/css">
html,body{
 width:100%;
 height:100%;
 margin:0px;
 padding:0px;
 overflow:hidden;
}
#Main{
 position:absolute;
 top:0px;
 left:0px;
 width:100%;
 height:100%;
 overflow:auto;
 z-index:1;
}
#ToolBar{

 position:absolute;
 top:3px;
 left:50px;
 width:300px;
 height:20px;
 background:#ccc;
 z-index:2;
 overflow:hidden;
}
</style>
</head>
<body scroll="no"><!-- scrol="no" IE中必须 -->
<div id="ToolBar">固定在上方不动</div>
<div id="Main">
<p>&nbsddddddddddddddddddddddddddddddddddddddddddddddddddp;</p>
<p>&nbsxxxxxxxxcccccccccccccccccccxp;</p>
<p>&nbsp;</p>
<p>&nbcxvcxvcxvscfgdfgxvxvcxzvcsp;</p>
<p>&ncxvcxzvczxvcxzvczbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;dfdf</p>
<p>&nbscxzvcxzvcxzvczxvcxzp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsxzvcccccccccccccccccccccccccccccccccccccccccccccccccccp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsxcvcvvvvddddfffffffffffffffffffffffffffffffffp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;ddddddddddddddddd</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsxp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbxsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>v
</div>
</body>

</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>
<style type="text/css">
html,body{
 width:100%;
 height:100%;
 margin:0px;
 padding:0px;
 overflow:hidden;
}
#Main{
 position:absolute;
 top:0px;
 left:0px;
 width:100%;
 height:100%;
 overflow:auto;
 z-index:1;
}
#ToolBar{

 position:absolute;
 top:3px;
 left:50px;
 width:300px;
 height:20px;
 background:#ccc;
 z-index:7;
 overflow:hidden;
}
#ToolBa_2{

 position:absolute;
 top:300px;
 left:50px;
 width:300px;
 height:20px;
 background:#ff0000;
 z-index3;
 overflow:hidden;
       color:#fff;
}
#ToolBa_3{

 position:absolute;
 top:600px;
 left:50px;
 width:300px;
 height:20px;
 background:#ff0000;
 z-index32;
 overflow:hidden;
       color:#fff;
}
#ToolBa_4{


 width:300px;
 height:200px;
 background:#ff0000;
 z-index35;
 overflow:hidden;
       color:#fff;
}
#ToolBa_5{


 width:300px;
 height:200px;
 background:#ff0000;
 z-index39;
 overflow:hidden;
       color:#fff;
}
</style>
</head>
<body scroll="no"><!-- scrol="no" IE中必须 -->
<div id="ToolBar">固定在上方不动</div>

 

<div id="ToolBa_2">可是这样页面上所有div的位置都固定不动了!</div>

<div  id="ToolBa_3">可是这样页面上所有div的位置都固定不动了!</div>

<div  id="ToolBa_4">可是这样页面上所有div的位置都固定不动了!</div>

<div  id="ToolBa_5">可是这样页面上所有div的位置都固定不动了!</div>
<div id="Main">

<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>
</body>

</html>