子元素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 ...
随机推荐
- 使用阿里云Java SDK 实现 DDNS
本代码的实现前提: 1.拥有阿里云域名,且获取了Access Key 及 Access Secret 2.能获取外网IP的页面地址(注意:ip138.com的实际包含ip地址为http://2018. ...
- stm32 uart 中断 蜜汁bug
在项目中,使用stm32f103,配置uart1接收RXNE中断,使用DMA来进行UART1的发送. 初始化代码如下: void uart_init(u32 bound) { GPIO_InitTyp ...
- 用自己的话简要阐述struts2的执行流程
Struts 2框架本身大致可以分为3个部分:核心控制器FilterDispatcher.业务控制器Action和用户实现的企业业务逻辑组件.核心控制器FilterDispatcher是Struts ...
- iOS应用图标AppIcon
应用图标需求:(像素px) 29pt: 58*58 ( @2x ) 87*87 ( @3x ) 40pt: 120*120 ( @2x ) 180*180 ( @3x ) 60pt ...
- 2018-2019-2 20165205 《网络对抗技术》 Exp6 信息收集与漏洞扫描
2018-2019-2 20165205 <网络对抗技术> Exp6 信息收集与漏洞扫描 实验目标 掌握信息收集的最基本技能与常用工具的方式 实验内容 各种搜索技巧的应用 DNS IP注册 ...
- 从零开始mycat实验环境搭建
版本说明 本机: jdk 8 使用IntelliJ IDEA调试MyCAT 1.6 release 主机一:droplet CentOS 7.5 x86_64 MyCAT 1.6 release O ...
- servlet对象的生命周期
servlet对象默认第一次访问的时候创建,服务器关闭的时候销毁.当servlet对象创建的时候会调用init方法,当对象销毁的时候,会调用destroy方法,每次访问servlet时,都会调用ser ...
- asp.net 微信开发（一）
在准备工作中,我们已经完成准备工作,接下来就是进行开发啦,应该怎么来开发呢??容我想想...我觉得我们可以直接让用户的消息发送到微信的消息,转到我们自己的服务器上面!!感觉好厉害的样子 1.首先写 验 ...
- Android APK反编译（二）
参考:APK反编译 工具介绍 apktool 作用:资源文件获取,可以提取出图片文件和布局文件进行使用查看 dex2jar 作用:将apk反编译成java源码(classes.dex转化成jar文件) ...
- idftp
No FTP list parsers have been registered use IdAllFTPListParsers IdFTP1.List(LS); 中文目录乱码 2个步骤解决 use ...