子元素z-index高于父元素兄弟元素z-index被遮挡问题
问题：最近在写样式时，遇到一个这样的问题，子元素的z-index值大于父元素兄弟元素z-index值，结果子元素超出父元素部分被父元素兄弟元素遮挡
解决：将父元素的z-index值设置为大于兄弟元素z-index值即可
代码如下：
<style>
.wrapper:first-of-type .outer:first-of-type {
z-index: 12;
}
.outer {
position: relative;
width: 300px;
height: 200px;
border: 1px solid #999;
background: #f00;
z-index: 10;
}
.inside {
position: absolute;
left: 0;
top: 0;
width: 300px;
height: 300px;
background: #0f0;
z-index: 20;
}
</style> <body>
<div class="wrapper">
<div class="outer">
<div class="inside">内部元素</div>
</div>
<div class="outer"></div>
</div>
<div class="wrapper">
<div class="outer">
<div class="inside">内部元素</div>
</div>
<div class="outer"></div>
</div>
</body>
子元素z-index高于父元素兄弟元素z-index被遮挡问题的更多相关文章
- line-height系列（二）——对行内元素（文字、图片、兄弟元素）、块级元素设置line-height后的表现
>原创文章,转载请注明来源! 二.对行内元素(文字.图片.兄弟元素).块级元素设置line-height后的表现 对块级元素无效,对行内元素有效.可继承给行内元素. 文字的line-height ...
- jQuery学习笔记---兄弟元素、子元素和父元素的获取
我们这里主要总结jQuery中对某元素的兄弟元素.子元素和父元素的获取,原声的Javascript代码对这些元素的获取比较麻烦一些,而jQuery正好对这些方法进行封装,让我们更加方便的对这些元素进行 ...
- jQuery中兄弟元素、子元素和父元素的获取
我们这里主要总结jQuery中对某元素的兄弟元素.子元素和父元素的获取,原声的Javascript代码对这些元素的获取比较麻烦一些,而jQuery正好对这些方法进行封装,让我们更加方便的对这些元素进行 ...
- jQuery 获取父窗口的元素 父窗口 子窗口(iframe)
$("#父窗口元素ID",window.parent.document); 对应javascript版本为window.parent.document.getElementById ...
- jQuery使用（四）：DOM操作之查找兄弟元素和父级元素
查找兄弟元素 向下查找兄弟元素 next() nextAll() nextUntil() 向上查找兄弟元素 prev() prevAll() prevUntil() 查找所有兄弟元素 siblings ...
- jQuery中的层级选择器（四、二）：后代元素、子元素、相邻元素、兄弟元素
<!DOCTYPE html> <html> <head> <title>层次选择器</title> <meta http-equiv ...
- UI自动化通过文字、父子元素，兄弟元素定位
在百度首页,通过文字,父子元素,兄弟元素进行定位 一.文字定位: 通过界面上的文字进行定位,注意如果同一个页面上存在多个同样的文字的情况,返回的值会是多个,建议只存在一个情况下才用这方法. 如:定位百 ...
- 解析jquery获取父窗口的元素
("#父窗口元素ID",window.parent.document); 对应javascript版本为window.parent.document.getElementByIdx ...
- jquery获取父窗口的元素[转]
$("#父窗口元素ID",window.parent.document); 对应javascript版本为window.parent.document.getElementById ...
- jQuery----获取兄弟元素的方法
① $(this).next(): 获取的是当前元素的下一个兄弟元素 ②$(this).nextAll(); 获取的是当前元素的后面的所有的兄弟元素 ③$(this).pre ...
随机推荐
- List集合去重
本篇包含了两种去重,一种是List集合去重,一种是两个List集合去重合并 List集合去重,一般是两种方式,一种是遍历list集合判断后赋给另一个list集合,一种是用赋给set集合再返回给list ...
- Python学习【01】编程语言简介，Python安装及环境变量配置
编程语言介绍 开发 系统软件开发:Windows,iOS 应用软件开发:淘宝.网易云音乐.QQ 开发语言 高级语言:Python,Java,PHP, c#,GO,ruby,c++ ---&g ...
- vue学习好文连接
1.什么是虚拟dom(VNode)? https://github.com/answershuto/learnVue/blob/master/docs/VNode%E8%8A%82%E7%82%B9. ...
- java类的生命周期
https://www.cnblogs.com/aspirant/p/7200523.html 验证的内容:文件格式,字节码,符号引用,元数据 准备:给静态变量分配内存设置初始值(0) 初始化才是真正 ...
- java生成简单验证码图片
概要 最近项目需要用java实现输出随机验证码图片到前台,正好有机会接触下java的绘图类,完成需求后也有时间做个总结,写篇随笔记录下也希望能帮助到有同样需求的人! 需求流程图 1．生成随机数 在ja ...
- consul的安装与使用
consul官网下载地址 https://www.consul.io/downloads.html 下载后解压 在bat文件中增加如下内容,就可以双击启动了 start consul agent -d ...
- Sublime Text3使用Package Control 报错There Are No Packages Available For Installation
转 http://blog.csdn.net/feilong_csdn/article/details/67638660 在使用sublime时,有时候我们希望将代码复制出来后仍然是高亮显示,这样我们 ...
- python configparse模块&xml模块
configparse模块 用于生成和修改常见配置文档,当前模块的名称在 python 3.x 版本中变更为 configparser. [DEFAULT] serveraliveinterval = ...
- SAML2.0 SP端处理
sso response解析 import java.io.ByteArrayInputStream; import java.io.InputStream; import java.security ...
- 统计不同渠道的的UV，再合计渠道总计UV
( SELECT `统计时间`, `贷款公司名称`, `推广员姓名`, UV FROM ac_statistics WHERE `贷款公司名称` = "金腰袋" AND `统计时间 ...