`
sayong
  • 浏览: 12646 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

利用z-index层级实现IE6中fixed效果

阅读更多
通常在做一些工具条的时候,使其固定在页面的指定位置,如顶部、底部等,并且不会随着滚动条的改变而改变,做前端的应该都知道,在除IE6外的浏览器中可以使用CSS的fixed属性。而在IE6中的解决办法大部分使用脚本来动态的更改工具条的位置,在效果上并没有fixed的效果好,在滚动条的时候会出现短暂的闪烁。周末在家使用电脑的时候,发现显示器右下角的图标并不会随着浏览器的滚动条的改变而改变,始终保持在显示器右下角,这个效果有点类似fixed属性。于是就一个DIV用来显示内容,并且可视高度始终保持与浏览器的可视区域一直,超过的部分就使用DIV的滚动条,在内容DIV上面加一个DIV,并使其始终定位在浏览器的底部,这样一来就实现了FIXED属性。说了这么多也不知道说明白没有,还是看DEMO,呵呵。

效果预览:http://www.lav.so/demo/demo3.html

原文地址:http://www.lav.so/index.php?aid=67
分享到:
评论
2 楼 sayong 2011-06-10  
这个应该可以调整下不遮住滚动条,改进好了再来分享,嘿嘿。
1 楼 int08h 2011-06-09  
能让他不盖住滚动条么……

相关推荐

    margin 负值引起的层级(z-index)问题

    另一方面,对于IE8和其它现代浏览器,可能需要外层元素具有overflow:hidden属性才能达到IE6、IE7中的覆盖效果。这是因为overflow属性在创建块格式化上下文(Block Formatting Context)时起到了关键作用。当元素设置...

    css里的z-index的使用

    1. **IE6/IE7中的元素问题**:在IE6/IE7中,元素的z-index值总是比其他元素高,即使它的z-index值设置得更低。这可能导致元素覆盖其他元素,即使其他元素的z-index值更高。 2. **IE6/IE7中的层叠上下文问题**:IE6...

    ie6 z-index不起作用的完美解决方法

    但在IE6中,这一规则并不总是成立。 文章中提到,IE6对浮动元素的处理存在缺陷。当一个元素浮动时,它可能会脱离正常的文档流,导致z-index失效。为了解决这个问题,可以采取以下措施: 1. 将父元素的position属性...

    div层调整z-index属性在IE中无效原因分析及解决方法

    在IE6中,元素的堆叠顺序有时并不取决于子元素的`z-index`,而是取决于其祖先中第一个设置了`position:relative`的元素的`z-index`。如果这个祖先的`z-index`较低,即使子元素的`z-index`非常高,也无法在视觉上超越...

    div层调整z-index属性无效原因分析及解决方法

    第二种无效情况是在IE6及IE7浏览器中,z-index的层级表现不完全按照子标签的z-index值高低来决定,而是受到整个DOM树结构的影响。在这些浏览器中,即使子元素的z-index值很高,如果其父元素所在的层级较低,则子元素...

    css设置z-index 失效的解决方法

    在CSS布局中,`z-index`属性用于控制元素在...通过调整`z-index`和`position`属性,可以有效地控制元素的叠加顺序,实现预期的视觉效果。在遇到`z-index`失效的问题时,检查这些基本设置通常能找出问题所在并进行修复。

    关于IE7 z-index的浏览器兼容性问题完美解决方案

    在IE7中,z-index属性在处理层叠上下文(stacking context)时存在一个已知的兼容性问题。IE7的浏览器会对定位元素(positioned elements)创建一个新的堆叠上下文(stacking context),即便这个元素的z-index值被...

    深入剖析z-index属性

    - position属性为absolute、relative或在Firefox和IE中为fixed,且z-index不为auto。 - flex项(display:flex/inline-flex)的z-index不为auto。 - opacity值不为1。 - transform值不为none。 - mix-blend-mode...

    CSS中的z-index属性基本使用教程

    但在IE6/7中,即使没有明确设置`z-index`,定位的父元素也会创建新的局部层叠上下文,导致子元素无法越过父元素覆盖其他元素,这常常是导致IE6/7覆盖问题的原因。 例如,有两个定位元素`.a`和`.b`,`.a`包含一个子...

    CSS属性探秘系列(七):z-index

    【CSS属性探秘系列(七):z-index】 在CSS世界中,`z-index`是一个至关重要...在实际开发中,合理地利用`z-index`能帮助我们创造出复杂的层叠效果,同时注意浏览器兼容性问题,以确保在各种环境中都能得到预期的结果。

    在IE6中浮动层遮盖不住select的方法

    在IE6中,`<select>`元素具有较高的Z轴层级(Z-index),即使设置了较高的Z-index值,浮动层也无法覆盖它。这与现代浏览器的行为不一致,使得开发者在设计网页时需要特别考虑IE6的兼容性问题。 为了解决这个难题,...

    让div浮动在select之上的完美解决方案!多浏览器兼容

    综上所述,实现"让div浮动在select之上的完美解决方案"涉及CSS的`z-index`、`position`属性,以及对IE6/7的特殊处理。通过这些技术,我们可以创建出既美观又具有良好兼容性的网页布局。记得在实际项目中进行充分的跨...

    网页Object标签遮盖DIV标签解决方法

    虽然这个问题在IE11中被强调,但也要确保在其他主流浏览器(如Chrome、Firefox、Safari和Edge)中进行测试,因为不同的浏览器可能有不同的渲染规则。 通过这些方法,你可以有效地解决`<Object>`标签遮盖`<div>`...

    解决IE6下Position:fixed问题

    这是因为在IE6中,只有当背景图片设置为`fixed`时,才会触发一种类似`position:fixed`的效果。 2. **利用expression()**:IE6特有的`expression()`函数可以用来动态计算元素的位置。例如,对于一个需要固定在顶部的...

    IE7浮层遮挡问题探讨及解决

    需要注意的是,在使用z-index时,必须确保父元素的position属性被设置为relative、absolute或fixed中的任意一种。这是因为z-index只对定位元素有效(即position属性不是static的元素)。只有这样,z-index才会生效,...

    ie6下select遮挡div

    在IT行业中,尤其是在网页开发领域,我们经常遇到与浏览器兼容性相关的问题,特别是涉及到老版本浏览器,如Internet Explorer 6(简称IE6)。标题“ie6下select遮挡div”指出的是一个典型的IE6特有的问题:当在网页...

    第八章 定位网页元素.md

    此外,还提到了`z-index`属性用于控制元素在堆叠顺序中的位置,以及如何通过`opacity`属性来调整元素的透明度。 #### 二、`position`属性详解 1. **`static`:** - 默认值。 - 没有定位,即元素按照正常文档流...

    不常用CSS样式

    - **定义**:`z-index` 属性用于指定一个元素在Z轴上的层级位置,即决定了元素在页面上堆叠顺序。当元素重叠时,`z-index` 值较大的元素会显示在`z-index` 值较小的元素之上。 - **适用情况**:只有设置了`position`...

Global site tag (gtag.js) - Google Analytics