css固定定位,即悬浮效果

css固定定位,即悬浮效果(例如对联广告),不用js,css中"position:fixed;"即可。
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 >
 
评论 7
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值