css固定定位实现悬浮效果 -网页特效-网站制作-IT知道网(http://www.itwis.com)

css固定定位实现悬浮效果

来源：发布时间：2008-01-30 发布人：浏览：人次字体： [大中小]

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">

<head>

<title>CSS固定定位</title>

* {

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]>

html {

height:100%;

overflow:hidden;

}

body {

height:100%;

overflow:auto;

}

#fixedLayer {

position:absolute;

}

</style>

<![endif]-->

</head>

<body>

</body>

</html>

【↑返回顶部】【文章评论(0条)】【收藏本文】【打印本文】【关闭窗口↓】

↑上一篇：通过css改变图片显示的内容

↓下一篇：CSS解决倾斜鼠标翻转导航制作麻烦问题

发布商链接

·CSS解决倾斜鼠标翻转导航制作麻烦问...
·网页表格制作之圆圈型表格的实现代码
·仿windows关机对话框的提示框效果代...
·淘宝在线状态和qq在线状态的生成代码
·网页CSS样式表学习技巧小记，供大家...
·无刷新更换页面样式例子供大家参考
·动态添加表单两法
·Css样式表实现文字的渐变效果代码
·DIV+CSS两个简单的导航效果,够美观！
·样式表固定table表头和列代码

网名：验证码：

【所有评论】【↑返回顶部】

评　分： 12 345

评论内容：(不能超过500字，请自觉遵守互联网相关政策法规。[按 Ctrl+Enter 可直接提交]

注意:请勿在本站发布政治话题、色情及违反法律的内容。

IT知道网声明：刊登此文章是为了传递更多信息，文章内容仅供参考，转载请注明出处。


首页 ┆ 网站地图 ┆ 在线留言 ┆ 游戏资讯 ┆ 资源下载 ┆ 端午节祝福 ┆ 迅雷在线影视

编程学堂> JAVA专区 \| .NET专区 \| PHP 专区 \| ASP 专区 \| C/C++ \| JAVASCRIPT \| 数据库 \| 软件工程 \| 网络技术 \| 网站制作 \| 编程相关 \| 硬件资讯
业界相关> 业界新闻 \| 操作系统 \| 办公技巧 \| 病毒安全 \| 图形图像 \| 常用工具 \| 资源下载 \| 网站推广 \| 即时通讯 \| IT故事 \| IT健康 \| QQ---MSN