css固定定位,即悬浮效果(例如对联广告),不用js,css中"position:fixed;"即可。
position:fixed; 以视口为包含块,因此在浏览器窗口内固定。
ie 6.0不支持,因此采用相对于html元素的绝对定位。
position:fixed; 以视口为包含块,因此在浏览器窗口内固定。
ie 6.0不支持,因此采用相对于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=gb2312" />
< title > CSS固定定位 </ title >
< style type ="text/css" >
* {
padding:0;
margin:0;
}
#fixedLayer {
width:100px;
line-height:50px;
background: #FC6;
border:1px solid #F90;
position:fixed;
left:10px;
top:10px;
}
</ style >
<!-- [if lte IE 6]>
<style type="text/css">
html {
height:100%;
overflow:hidden;
}
body {
height:100%;
overflow:auto;
}
#fixedLayer {
position:absolute;
}
</style>
<![endif] -->
</ head >
< body >
< div id ="fixedLayer" > 固定不动 </ div >
< p > dd </ p >
< p > dd </ p >
< p > dd </ p >
< p > dd </ p >
< p > dd </ p >
< p > dd </ p >
< p > dd </ p >
< p > dd </ p >
< p > dd </ p >
< p > dd </ p >
< p > dd </ p >
< p > dd </ p >
< p > dd </ p >
< p > dd </ p >
< p > dd </ p >
< p > dd </ p >
< p > dd </ p >
< p > dd </ p >
< p > dd </ p >
< p > dd </ p >
< p > dd </ p >
< p > dd </ p >
< p > dd </ p >
< p > dd </ p >
< p > dd </ p >
< p > dd </ p >
< p > dd </ p >
< p > dd </ p >
< p > dd </ p >
< p > dd </ p >
< p > dd </ p >
< p > dd </ p >
< p > dd </ p >
< p > dd </ p >
< p > dd </ p >
< p > dd </ p >
< p > dd </ p >
< p > dd </ p >
< p > dd </ p >
< p > dd </ p >
< p > dd </ p >
< p > dd </ p >
< p > dd </ p >
< p > dd </ p >
</ body >
</ html >
< html xmlns ="http://www.w3.org/1999/xhtml" >
< head >
< meta http-equiv ="Content-Type" content ="text/html; charset=gb2312" />
< title > CSS固定定位 </ title >
< style type ="text/css" >
* {
padding:0;
margin:0;
}
#fixedLayer {
width:100px;
line-height:50px;
background: #FC6;
border:1px solid #F90;
position:fixed;
left:10px;
top:10px;
}
</ style >
<!-- [if lte IE 6]>
<style type="text/css">
html {
height:100%;
overflow:hidden;
}
body {
height:100%;
overflow:auto;
}
#fixedLayer {
position:absolute;
}
</style>
<![endif] -->
</ head >
< body >
< div id ="fixedLayer" > 固定不动 </ div >
< p > dd </ p >
< p > dd </ p >
< p > dd </ p >
< p > dd </ p >
< p > dd </ p >
< p > dd </ p >
< p > dd </ p >
< p > dd </ p >
< p > dd </ p >
< p > dd </ p >
< p > dd </ p >
< p > dd </ p >
< p > dd </ p >
< p > dd </ p >
< p > dd </ p >
< p > dd </ p >
< p > dd </ p >
< p > dd </ p >
< p > dd </ p >
< p > dd </ p >
< p > dd </ p >
< p > dd </ p >
< p > dd </ p >
< p > dd </ p >
< p > dd </ p >
< p > dd </ p >
< p > dd </ p >
< p > dd </ p >
< p > dd </ p >
< p > dd </ p >
< p > dd </ p >
< p > dd </ p >
< p > dd </ p >
< p > dd </ p >
< p > dd </ p >
< p > dd </ p >
< p > dd </ p >
< p > dd </ p >
< p > dd </ p >
< p > dd </ p >
< p > dd </ p >
< p > dd </ p >
< p > dd </ p >
< p > dd </ p >
</ body >
</ html >