js跟css控制DIV永远固定在页面某个地方

js和css控制DIV永远固定在页面某个地方

js代码:

 

<style type="text/css">

html,body {

width: 100%;

height: 100%;

margin: 0px;

padding: 0px;

overflow: hidden;

}

 

#Main {

position: absolute;

bottom: 0px;

left: 0px;

width: 100%;

height: 100%;

overflow: auto;

z-index: 1;

}

 

#ToolBar {

position: absolute;

bottom: 30px;

right: 50px;

width: 70px;

height: 50px;

text-align: center;

background: #ccc;

z-index: 2;

overflow: hidden;

}

</style>

 

 

css代码:

 

html,body {

width: 100%;

height: 100%;

margin: 0px;

padding: 0px;

overflow: hidden;

}

 

#Main {

position: absolute;

bottom: 0px;

left: 0px;

width: 100%;

height: 100%;

overflow: auto;

z-index: 1;

}

 

#ToolBar {

position: absolute;

bottom: 0px;

right: 16px;

width: 100%;

height: 20px;

text-align: center;

background: #ccc;

z-index: 2;

overflow: hidden;

}

 

 

页面代码:

 

<body>

<div id="Main">

Test<p>

Test<p>

Test<p>

Test<p>

Test<p>

Test<p>

Test<p>

Test<p>

Test<p>

Test<p>

Test<p>

Test<p>

Test<p>

Test<p>

Test<p>

Test<p>

Test<p>

Test<p>

Test<p>

Test<p>

Test<p>

Test<p>

Test<p>

Test<p>

Test<p>

Test<p>

Test<p>

Test<p>

Test<p>

Test<p>

Test<p>

Test<p>

Test<p>

Test<p>

Test<p>

Test<p>

Test<p>

Test<p>

Test<p>

Test<p>

Test<p>

Test<p>

Test<p>

Test<p>

Test<p>

Test<p>

Test<p>

Test<p>

Test<p>

Test<p>

Test<p>

Test<p>

Test<p>

Test<p>

Test<p>

Test<p>

Test<p>

Test<p>

Test<p>

Test<p>

Test<p>

Test<p>

Test<p>

Test<p>

Test<p>

Test<p>

Test<p>

Test<p>

Test<p>

Test<p>

Test<p>

Test<p>

Test<p>

Test<p>

Test<p>

Test<p>

Test<p>

Test<p>

Test<p>

Test<p>

</div>

<div id="ToolBar">我是固定的</div>

</body>