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>


目录
相关文章
|
7天前
|
前端开发 JavaScript
如何利用 CSS3 动画实现元素的淡入淡出效果?
在上述代码中,定义了一个名为 `fade-in` 的CSS类,其初始透明度为0,并设置了淡入的过渡效果。当通过JavaScript为元素添加 `active` 类时,元素的透明度变为1,实现淡入效果;当再次点击按钮移除 `active` 类时,元素又会逐渐淡出。通过这种方式,可以根据用户的操作灵活地控制元素的淡入淡出效果。
49 3
|
24天前
CSS_定位_网页布局总结_元素的显示与隐藏
CSS_定位_网页布局总结_元素的显示与隐藏
22 0
|
1月前
|
前端开发
css 块元素、行内元素、行内块元素相互转换
css 块元素、行内元素、行内块元素相互转换
95 0
|
3月前
|
前端开发 容器
最新CSS3定位元素
【8月更文挑战第28天】
29 5
|
3月前
|
前端开发
CSS - 使用 clip-path 轻松实现正六边形块状元素
如何使用CSS的`clip-path`属性来创建正六边形的块状元素。文章提供了详细的HTML和CSS代码示例,展示了如何实现六边形的布局和样式,并通过CSS动画增强了视觉效果。最终效果是一个包含文本的可交互的正六边形元素,当鼠标悬停时会改变颜色。
152 0
CSS - 使用 clip-path 轻松实现正六边形块状元素
|
3月前
|
存储 前端开发
为 HTML 元素指定 CSS 样式的方式
【8月更文挑战第24天】
73 0
|
3月前
|
前端开发
CSS动画新潮流:炫酷水波效果,让网页元素生动起来!
CSS动画新潮流:炫酷水波效果,让网页元素生动起来!
|
3月前
|
前端开发
2s 利用 HTML+css动画实现企业官网效果
2s 利用 HTML+css动画实现企业官网效果
HTML+CSS 实现通用的企业官网页面(记得收藏)
HTML+CSS 实现通用的企业官网页面(记得收藏)