当前位置： > 网页特效 > 综合特效 > 文章内容

网页特效代码实例:CSS实现网页固定位置的浮动

http://www.itjxue.com 2015-08-05 00:33 来源:未知 点击次数:

position: fixed;这个属性用起来确实很方便，可以轻松的实现固定位置的浮动层效果。但是，它不支持IE6及以下版本。于是很多同学使用JS模拟。今天写了一个DEMO，涉及左侧、右侧。及上下两边，共四种位置的固定，与以往的教程不同的地方是，它使用CSS表达式来兼容IE5、IE6，且避免了js模拟时，拖动滚动条时出现抖动的问题，另外在IE5或者怪癖模式下也完全正常，没有任何问题。如果你有更好的方案，欢迎来喷我。

<!DOCTYPE HTML> <<a href='http://www.itjxue.com/plus/search.php?kwtype=0&keyword=html&' target='_blank'><u>html</u></a>> <head> <meta charset="utf-8"> <title>position: fixed</title> <style type="text/css"> * { padding: 0; margin: 0; } #content { height: 5000px; width: 50%; border-right: 10px dotted red; } #demo_t, #demo_b, #demo_l, #demo_r { background: #f90; position: fixed; } #demo_t, #demo_b { left: 0; width: 100%; } #demo_l, #demo_r { width: 50px; top: 300px; } #demo_t { top: 0; } #demo_b { bottom: 0; } #demo_l { left: 0; } #demo_r { right: 0; } </style>  </head> <body> <div id="demo_t">此处显示 id "demo" 的内容</div> <div id="demo_b">此处显示 id "demo" 的内容</div> <div id="demo_l">此处显示 id "demo" 的内容</div> <div id="demo_r">此处显示 id "demo" 的内容</div> <div id="content"></div> </body> </html>

[ 提示：你可先修改部分代码，再按Ctrl+A 全部选择 ]

(责任编辑：IT教学网)

复制链接发给好友收藏本文关闭此页

上一篇：网页特效代码:网页左右两侧居中的对联广告代码

下一篇：网页特效代码：漂亮简洁的网页计算器

网页特效代码实例:CSS实现网页固定位置的浮动

(责任编辑：IT教学网)

相关综合特效文章

阅读排行

专题教程

推荐综合特效文章

最新更新综合特效