绝对定位元素被遮挡

ie7下

绝对定位元素即使z-index值很高，如果其设置相对定位的父元素没有设置z-index值的话，其可能（这种可能性当然是布局存在遮盖的时候）会被后面设置了相对定位的元素遮挡（即使后面的相对定位的元素没有设置z-index值）；

<div style="position:relative;">

　　<p style="position:absolute;z-index:99999;"></p>

</div>

<div style="position:relative;">
</div>

如果上下这两个div存在互相遮盖的情况，那么下面的div会遮盖住上面的div

解决方法：

给被遮盖的绝对定位元素的设置了相对定位的元素设置z-index值

<div style="position:relative;z-index:1;/*这个值只要比下面div的z-index值高就行*/">

　　<p style="position:absolute;z-index:99999;"></p>

</div>

<div style="position:relative;">
</div>

绝对定位元素被遮挡

时间： 2024-10-31 04:58:49

绝对定位元素被遮挡的相关文章

小tip: margin:auto实现绝对定位元素的水平垂直居中

转载自:http://www.zhangxinxu.com/wordpress/?p=3794 一.绝对定位元素的居中实现 如果要问如何CSS实现绝对定位元素的居中效果,很多人心里已经有答案了. 兼容性不错的主流用法是: .element { width: 600px; height: 400px; position: absolute; left: 50%; top: 50%; margin-top: -200px; /* 高度的一半 */ margin-left: -300px; /* 宽度

css绝对定位元素实现居中的几个方法

一:CSS绝对定位元素left设为50%实现水平居中 绝对定位的元素left设为50%时,是已左上角为原点的,所以只要再使用margin属性添加负值补偿回来即可.示例:[css]代码如下: #board{ width:60%; padding:3%; background:#09F; position:absolute; top:0px; left:50%; margin-left:-30%; } 这样就能使得一个蓝色区域水平居中   二.绝对定位元素的完全居中实现 如果要问如何CSS实现绝对定

绝对定位元素，浮动元素居中

绝对定位元素的居中实现  (转自:http://www.cnblogs.com/zyy711865/p/3479064.html) 方法一:兼容性不错的主流用法是: .element { width: 600px; height: 400px; position: absolute; left: 50%; top: 50%; margin-top: -200px; /* 高度的一半 */ margin-left: -300px; /* 宽度的一半 */ } 但,这种方法有一个很明显的不足,就是需

CSS绝对定位元素居中的几种方法

CSS居中绝对定位元素的方法,有很多种,下面是我收集的几种 1,div宽度未知1 <body> <div style="position: absolute; left: 50%;"> <div style="position: relative; left: -50%; border: dotted red 1px;"> 没有宽度<br /> 照样居中,嘿嘿嘿 </div> </div> &l

绝对定位元素的百分比margin

绝对定位元素的百分比margin是相对于第一个定位元素祖先元素(relative/absolute/fixed)的宽度(width)计算的 橙色的宽度(width)为1000px, 蓝色的宽度(width)为600px, img的margin为10%, margin-left等于1000*10%, margin-top等于1000*10%. 这时图片的margin值只与第一个定位元素的宽度有关. <!DOCTYPE html> <html> <head> <met

绝对定位元素实现水平垂直居中

第一种: .element { width: 600px; height: 400px; position: absolute; left: 50%; top: 50%; margin-top: -200px; /* 高度的一半 */ margin-left: -300px; /* 宽度的一半 */ } 但,这种方法有一个很明显的不足,就是需要提前知道元素的尺寸.否则margin负值的调整无法精确.此时,往往要借助JS获得. 第二种: CSS3的兴起,使得有了更好的解决方法,就是使用transf

关于IE6下绝对定位元素莫名消失的问题

一般来说,让绝对定位的元素不挨着浮动元素就OK了: 1.当绝对定位层的邻近浮动层的宽度不等于父层宽度时,以及没有清除浮动时,IE6/7,FF中显示一致: 2.当绝对定位层的邻近浮动层的宽度不等于父层宽度时,有清除浮动时,IE6/7不显示绝对定位层,FF显示: 3.当绝对定位层的邻近浮动层的宽度等于父层宽度时,以及没有清除浮动时,IE6不显示绝对定位层,IE7/FF显示: 4.当绝对定位层的邻近浮动层的宽度等于父层宽度时,有清除浮动时,IE6/7不显示绝对定位层,FF显示: 就目前来说我个人的解决

总结一下各种居中（内联元素、块级元素、浮动元素、绝对定位元素）*（水平、垂直）

在平时写网页样式的时候,元素居中应该是最常见不过的了,在这里我们把常见居中的情况简单总结一下.本文讨论以下几种情况:内联元素.块级元素.浮动元素.绝对定位元素.居中的情况分两种情况:水平居中和垂直居中.刚接触到居中,我想到的是两个方向,一是使元素内部的所有元素相对于此元素居中,另一个是元素在其他元素中居中.以下的居中我们讨论的都是元素在其他元素中居中. (一)内联元素 水平居中:只需在其父元素的样式中加上text-align: center;即可. 垂直居中: 1. line-height 2.

绝对定位元素水平居中和垂直居中的原理

通常在设置绝对定位元素相对于其定位的祖先元素水平垂直居中时,通过绝对定位元素设置margin:auto; top:0; bottom:0; right:0; left:0;就可以实现.下面简单探索一下绝对定位元素这么设置就可以实现水平居中和垂直居中的原理. 核心CSS代码: position:absolute; margin:auto; top:0; bottom:0; right:0; left:0; 绝对定位元素的布局由元素的三个因素决定:位置(top.bottom.left.right).