css中如何解决绝对定位元素被遮挡的问题

简介: css中如何解决绝对定位元素被遮挡的问题

ie7下


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


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

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


解决方法如下:


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


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


目录
相关文章
|
30天前
|
前端开发 容器
最新CSS3定位元素
【8月更文挑战第28天】
18 5
|
1月前
|
前端开发
CSS - 使用 clip-path 轻松实现正六边形块状元素
如何使用CSS的`clip-path`属性来创建正六边形的块状元素。文章提供了详细的HTML和CSS代码示例,展示了如何实现六边形的布局和样式,并通过CSS动画增强了视觉效果。最终效果是一个包含文本的可交互的正六边形元素,当鼠标悬停时会改变颜色。
97 0
CSS - 使用 clip-path 轻松实现正六边形块状元素
|
1月前
|
前端开发
HTML+CSS基础知识(5)相对定位、绝对定位、固定定位
这篇文章介绍了HTML和CSS中的三种定位方式:相对定位、绝对定位和固定定位,并通过代码示例展示了它们如何影响元素在页面上的布局和位置。
HTML+CSS基础知识(5)相对定位、绝对定位、固定定位
|
1月前
|
存储 前端开发
为 HTML 元素指定 CSS 样式的方式
【8月更文挑战第24天】
49 0
|
1月前
|
前端开发
CSS动画新潮流:炫酷水波效果,让网页元素生动起来!
CSS动画新潮流:炫酷水波效果,让网页元素生动起来!
|
2月前
|
前端开发 容器
CSS对行级元素的影响
【7月更文挑战第4天】CSS对行级元素的影响
30 2
|
2月前
|
前端开发 容器
CSS【详解】对齐 (含文本垂直对齐,文本水平对齐、单行文本垂直居中、多行文本垂直居中、6 种方案块级元素水平垂直居中 、7 种方案图片水平垂直居中、文本自适应对齐、图标和文本对齐,图片和文本对齐等)
CSS【详解】对齐 (含文本垂直对齐,文本水平对齐、单行文本垂直居中、多行文本垂直居中、6 种方案块级元素水平垂直居中 、7 种方案图片水平垂直居中、文本自适应对齐、图标和文本对齐,图片和文本对齐等)
48 0
|
2月前
|
前端开发 容器
CSS【详解】定位 position (静态定位 static -- 文档流排布 、相对定位 relative、绝对定位 absolute、固定定位 fixed、黏性定位 sticky)
CSS【详解】定位 position (静态定位 static -- 文档流排布 、相对定位 relative、绝对定位 absolute、固定定位 fixed、黏性定位 sticky)
23 0
|
前端开发 容器
css:整理9种元素水平垂直居中的方法
css:整理9种元素水平垂直居中的方法
139 0
css:整理9种元素水平垂直居中的方法