您的位置：首页 > 网站优化 > css  >  css实现固定元素在网页右下角浮动层效果(兼容ie、chrome、Firefox)

css实现固定元素在网页右下角浮动层效果(兼容ie、chrome、Firefox)

 更新时间：2016年9月14日 14:19  点击：2344
css中固定元素位置我们会使用position:fixed来处理，但如果还考虑到ie7/6我们可以使用hack处理来解决，具体一起来看看。

但是在IE6下，并不支持position:fixed属性，这个时候我们需要对IE6进行hack处理。解决的方案是使用postion:absolute属性，它的作用大家都很熟悉，相对于父元素进行绝对定位，然后我们可以通过expression来改变#ads的top值。


PS expression的定义：IE5及其以后版本支持在CSS中使用expression，用来把CSS属性和Javas cript表达式关联起来，这里的CSS属性可以是元素固有的属性，也可以是自定义属性。就是说CSS属性后面可以是一段Javas cript表达式，CSS属性的值等于Javas cript表达式计算的结果。 在表达式中可以直接引用元素自身的属性和方法，也可以使用其他浏览器对象。这个表达式就好像是在这个元素的一个成员函数中一样

所以我们可以通过在css里计算javascript值来改变top值，代码如下：

 代码如下 复制代码

#ads{
    _position:absolute;
    _top:expression(documentElement.scrollTop + documentElement.clientHeight-this.offsetHeight);
}

似乎一切都完美了，但是我们在IE6下运行的时候会发现，随着滚动条的移动，我们的这个#ads朋友他会抖动。解决方法也很简单，只要在body里加一点点的css，如下：

 代码如下 复制代码

body{
    background-image:url(about:blank); /* for IE6 */
    background-attachment:fixed; /*必须*/
}

例子

 

 代码如下 复制代码
<!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=utf-8" />
<title>demo</title>
<style>
    #top{
        border:1px solid blue;
        background:#ccc;
        width:200px;
        height:150px;
        position:fixed;
        _position:absolute;
        bottom:0;
        right:0;
        _top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)));
    }
 
    *html{
        background-image:url(about:blank);
        background-attachment:fixed;
    }
</style>
</head>
<body >
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
 
<div id="top">
    测试效果
</div>
</body>
</html>

其实现在我们可以不考虑到ie6了毕竟ie6已经过期了哦。

[!--infotagslink--]

相关文章

  • 从chrome调试工具中把拖延时间的东西找出来

    我打开android开发手册的时候：http://www.csdn123.com/html/android/reference/packages.html 发现打开速度很慢，我用按了一下F12打开调试面板，切换到网络的选项卡network...2016-05-19

  • 利用 Chrome Dev Tools 进行页面性能分析的步骤说明(前端性能优化)

    这篇文章主要介绍了利用 Chrome Dev Tools 进行页面性能分析的步骤说明(前端性能优化),本文给大家介绍的非常想详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下...2021-02-24

  • Chrome插件开发系列一：弹窗终结者开发实战

    从这一节开始，我们将从零开始打造我们的chrome插件工具库，第一节我们将讲一下插件开发的基础知识并构建一个简单但却很实用的插件，在构建之前，我们先简单的了解一下插件以及插件开发的基础知识...2020-10-03

  • chrome监听cookie变化与赋值问题

    这篇文章主要介绍了chrome监听cookie变化与赋值问题,cookie监听与赋值操作需要manifest文件里声明权限问题，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下...2021-10-22

  • 兼容ie和firefox css alpha实现透明效果

    文章介绍了利用了css hack来实现兼容ie和firefox 的div透明效果,有需要的朋友可以参考一下，好了费话不说多了。 为了实现一些特殊效果，需要将页面元素变透明，本文介...2017-07-06

  • css实现固定元素在网页右下角浮动层效果(兼容ie、chrome、Firefox)

    css中固定元素位置我们会使用position:fixed来处理，但如果还考虑到ie7/6我们可以使用hack处理来解决，具体一起来看看。 但是在IE6下，并不支持position:fixed属性，这个...2016-09-14

  • js右下角弹出提示框示例代码

    这篇文章主要介绍了js右下角弹出提示框示例代码，即网页右下角弹出广告信息框实例代码，感兴趣的小伙伴们可以参考一下...2016-01-14

  • 10 款珍藏已久的 Chrome 浏览器插件(程序员必装)

    Chrome 浏览器有一个好处，就是插件极其丰富，只有你想不到的，没有你找不到的，这恐怕是 Chrome 浏览器被众多爱好者钟爱的原因吧。今天给大家分享这些插件太强了，Chrome 必装！尤其程序员...2021-05-19

  • cookie与session跨域登陆代码(ie6,ie7,firefox)

    frameset里面，也就是里面的frame是来自第三方站点(不同ip或不同域名)，那么默认情况下ie会自动禁用这些站点的cookie，也就是在请求某url时在http header里不发送它们的cook...2016-11-25

  • 基于javascript实现右下角浮动广告效果

    这篇文章主要介绍了基于javascript实现右下角浮动广告效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2016-01-12

  • PHP+mysql+ajax轻量级聊天室实例(兼容Chrome和IE)

    ajax聊天室就是定时不定的刷新框架页面了，下面来给各位整理了一个PHP+mysql+ajax轻量级聊天室实例(兼容Chrome和IE)的例子，希望对大家有帮助． 做了一个QQ聊天交友...2016-11-25

  • Chrome悄悄升级WebGL 2.0标准

    其实早在 Chrome 56（今年一月底更新）的时候，Google 就已经加进了 WebGL 2.0 的支持，但当时并没有特别着墨，而是在昨天的一篇博客文章里才做了特别的描述。WebGL 是一套以让网页得以显示靠显卡加速的 3D 画面的 JavaScript API，最早的 1.0 版六年前就已经加入 Chrome 中，而现在的 2.0 版则是增加了对延迟渲染、色调映射、粒子效果等先进的技巧。这也将 WebGL 提升到了与 OpenGL ES 3.0 相同的功能水准。...2017-07-06

  • css中firefox ie6 ie7 ie8的css样式hack

    以前我们大部分都是用!important来hack，对于ie6和firefox测试可以正常显示，但是ie7以上对!important可以正确解释，会导致页面没按要求显示！搜索了一下，找到了一个针对IE7、...2017-07-06

  • 网页右下角弹出窗体实现代码

    复制代码 代码如下: <!--开始--> <style type="text/css"> #msg_win{position:absolute;right:0px;display:none;overflow:hidden;z-index:99;border:1px solid #c00;background:#F9EFFC;width:210px;font-size:12px;...2014-06-07

  • C++获取多浏览器上网历史记录示例代码(支持获取IE/Chrome/FireFox)

    这篇文章主要介绍了C++获取多浏览器上网历史记录示例代码,支持获取IE, Chrome,FireFox等浏览器...2020-04-25

  • Chrome内核下由ashx输出的js代码不起作用的解决方法

    Chrome内核下由ashx输出的js代码不起作用的解决方法，需要的朋友可以参考一下...2021-09-22

  • 解决IDEA克隆代码后在右下角没有git分支的问题

    这篇文章主要介绍了解决IDEA克隆代码后在右下角没有git分支的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2021-02-27

  • linux 下selenium chrome使用详解

    这篇文章主要介绍了linux 下selenium chrome使用详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2020-05-10

  • 使用Python解析Chrome浏览器书签的示例

    这篇文章主要介绍了使用Python解析Chrome浏览器书签的示例，帮助大家更好的理解和使用python，感兴趣的朋友可以了解下...2020-11-14

  • 除了搜索和Chrome：我还喜欢Google这5款App

    在过去的十几年里，Google 一直占据着搜索引擎的霸主之位，旗下的 Chrome 浏览器也在上架后的短短几年内超过了 IE 成为 PC 市场占有率最高的浏览器。...2016-12-07