IE下绝对定位(position:absolute)失效

IE(包括IE10等)下绝对定位(position:absolute)a标签或者其它标签失效,很明显这是一个很神奇的bug,在该情况下,z-index,等等属性皆会失效.但是给这个标签加上一些熟悉又没事了.
这个应该跟文档模式有关,具体,等有空在研究
CSS:

 代码如下 复制代码

a{
    /* 加背景颜色 */
    background-color: #000;
    /* 或者加边框 */
    border: 1px solid #fff;
    /* 或者加背景图片*/
    background-image:url(xxx.jpg)
    /* 或者加空白页的命令 */
    background-image:url(about:blank);
}

如果你z-index与position:absolute同时使用时它也会失效哦

倘若不给父容器定义z-index的话,子容器的z-index就无法生效。前提是:父容器有相对定位,子容器有绝对定位。

比如下面这个例子:

红、绿、蓝三个色块
红、蓝平级,且都定义了position:relative
绿是红的子容器,且绿定义了position:absolute;    z-index:10;
在IE系列浏览器下,绿色块的z-index:10;无效,被蓝色块给遮挡住了。
解决这个bug,必须在红色块的样式里,定义一个z-index才可以。

未解决IE bug前的效果


解决IE bug后的效果:(给父容器也增加z-index属性)

红色块和蓝色块属于同辈,只有红色块的z-index大于与它同辈的蓝色块,
红色块的子级才有可能起到作用(也就是在蓝色块或者蓝色块子级的上面),
ie6下的z-index默认是0;所以你必须把红色块的z-index值设置的大于0;也就是比蓝色块的大就行了。

时间: 2024-08-31 06:51:51

IE下绝对定位(position:absolute)失效的相关文章

css中position相对定位和绝对定位(relative,absolute)详解

在CSS中有这样的一个指令:(position) 在DW中文版中翻译为"定位",常用的属性有relative(相对)与 absolute(绝对). 有很多朋友对这条指令的用法还是不清楚,这里做一定细致的讲解: position:relative; 表示相对定位,被定位了这个属性的标签在所属的范围内可以进行上下左右的移,这里的移动与padding或是margin所产生的位置变化是不一样的.padding与margin是元素本身的一种边距与填充距离并不是真正的移动,而被定义为relativ

CSS 有关Position = absolute (绝对定位 是相对于谁而言)

  CSS 有关Position = absolute (绝对定位 是相对于谁而言) css中有绝对定位法,以前一直搞不懂绝对定位是相对于谁而言的绝对定位.   现在搞清楚了,不是相对于父元素,也不是相对于BODY.   而是相对于所属元素树中,相邻最近的那个显示标识了position属性的元素.   比如   <div id="a" style="position:relative">  <div id="b">    

CSS 中 position:absolute 与 z-index 对层次结构影响

css 不使用 position 这种情况下每一层都遵循 HTML 定位规则,其中的 left,right,top,bottom 定位信息对其无效,z-index 也不会发挥作用因为没有层叠的情况出现. 2. 使用 absolute 如两个绝对定位对象的 z-index 属性具有同样的值,那么将依据它们在HTML文档中声明的顺序层叠. 2.1 未使用 z-index 这种情况下,依据它们在HTML文档中声明的顺序层叠,因为 z-index 在未设置的情况下,默认为 0 . <div id = &qu

js-定义position:absolute;之后&amp;amp;lt;img&amp;amp;gt;标签往右偏了

问题描述 定义position:absolute;之后<img>标签往右偏了 定义position:absolute;之后标签往右偏了 解决方案 你还要设置相应的left和top值啊 解决方案二: 你还要其它的设置的,光绝对定位是不行的 解决方案三: haha解决方案四: 其他一些属性也必须一起设置啊,亲 解决方案五: 这问题真是~牛X,题主问类似等问题的时候能不能说的详尽一点儿,这样大家才好帮忙,什么有效信息都没有大家怎么出主意呃. 你用的position属性是CSS用来定位的属性(废话),

瀑布流网页 position: absolute下方div重叠

问题描述 我做了瀑布流网页最外层父DIVwidth:1000px;height:100%;display:blockULposition:relative;width:100%;margin:0auto内层子LIposition:absolute;width:235px;height:auto;overflow:hidden;最下方width:100%;height:430px;padding:0;margin:0;子层li设定了position:absolute,是为了让他因图文高度不同而有所

测试-本地与服务器打开同一个html页面,服务器上的页面在ie7下css3样式 旋转失效

问题描述 本地与服务器打开同一个html页面,服务器上的页面在ie7下css3样式 旋转失效 本地样式测试没有问题.提交服务器**旋转样式**失效.失效只在ie7下失效. 而且如果ie的版本是11的调成7才会有这个问题.如果是低于11的调成7的就没有问题. <div id="shade" style="position: absolute; z-index: 99;top: 275px;left: 888px;width: 145px;height: 145px; tr

iScroll解决手机浏览器position:fixed失效的问题

最近出于工作原因要做几个针对移动端的二级域网站,在以往的响应式布局经验中,手机端的浏览器都不识别CSS中的 position:fixed; 定位的.这样如果打算坚持使用APP式的顶端工作条的话我们只能使用javascript,虽然 JS 会略微提高服务器压力但也足以弥补因 position:fixed; 失效而导致的页面效果. 在此类JS中 iscroll 框架可谓专门针对这个问题而诞生,iscroll不仅弥补了position:fixed;在移动端的缺陷,同时也在框架中加入了很多弹性效果及移动

XHTML下JS浮动代码失效问题解决方法

XHTML下JS浮动代码失效问题解决方法 漂浮广告/对联代码 为什么在XHTML语言的网页中不能使用? 对联代码,查阅它在xhtml下的表达方式,结果很简单了.这是因为,按照标准来说,我们看到的窗体的滚动条不应该是 body 的,而是 HTML 的(也就是 document.documentElement 对象)所以,解决办法是:把html下不标准的代码"document.body.scrollTop"变换为"document.documentElement.scrollTo

css父级position:absolute;那么子元素的高度如何调整

问题描述 css父级position:absolute;那么子元素的高度如何调整 比如一个div是父级.position:absolute;是它的一个子元素,当我设置它的样式为margin-top: 20px;时,它的高度却没有变化:求解答. 解决方案 http://luyumiao1990.blog.163.com/blog/static/2134162282013111835242580/