CSS简单实现网页悬浮效果（对联广告）
(编辑：jimmy 日期: 2024/12/26 浏览：3 次 )
css固定定位，即悬浮效果（例如对联广告），不用js，css中"position:fixed;"即可。
position:fixed; 以视口为包含块，因此在浏览器窗口内固定。
ie 6.0不支持，因此采用相对于html元素的绝对定位。
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>
<title>CSS固定定位</title>
<styletype="text/css">...
*{...}{
padding:0;
margin:0;
}
#fixedLayer{...}{
width:100px;
line-height:50px;
background:#FC6;
border:1pxsolid#F90;
position:fixed;
left:10px;
top:10px;
}
</style>
<!--[iflteIE6]>
<styletype="text/css">
html{
height:100%;
overflow:hidden;
}
body{
height:100%;
overflow:auto;
}
#fixedLayer{
position:absolute;
}
</style>
<![endif]-->
</head>
<body>
<divid="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>
position:fixed; 以视口为包含块，因此在浏览器窗口内固定。
ie 6.0不支持，因此采用相对于html元素的绝对定位。
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head>
<metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/><title>CSS固定定位</title>
<styletype="text/css">...
*{...}{padding:0;
margin:0;}
#fixedLayer{...}{width:100px;line-height:50px;background:#FC6;border:1pxsolid#F90;position:fixed;left:10px;top:10px;}</style><!--[iflteIE6]><styletype="text/css">html{height:100%;overflow:hidden;}body{height:100%;overflow:auto;}#fixedLayer{position:absolute;}</style><![endif]--></head><body><divid="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>下一篇：CSS教程：行高line-height属性(1)