子元素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 ...
随机推荐
- Ehcache3.4 XML配置硬盘存储
最近开始学习使用Ehcache, 3.4的文档实在过于简单,尤其是对于XML配置,例子太少.相对于硬编码,我更偏爱灵活的XML配置,为了实现xml配置,摸索了两天,终于运行成功. ehcache.xm ...
- Windows Unity ARKit发布到IOS相关设置及错误解决
Windows 版Unity安装: 考虑到在虚拟机中运行Unity比较卡,所以采用在Windows Unity上将项目发布好然后再复制到Mac虚拟机中通过XCode进行编译的方式. Unity版本为 ...
- JAVA图片验证码（转自“云在青山”）
首先创建一个生成图片的类,设置一些请求参数,生成随机的字符串,然后字符串传给生成验证码图片的类进行处理,完成后输出到页面 1.创建验证码生成类 package hh.com.util; import ...
- jquery 防止当前页面被Iframe嵌套,防止登录页面Iframe被嵌套
<script type="text/javascript"> if (top.location != location) { top.location.href = ...
- python3使用pymysql库连接MySQL的常用操作
#导入pymysql模块import pymysql #连接数据库connect = pymysql.connect( host='localhost', port=3306, user='root' ...
- rsync：基本命令和用法
以下是rsync系列篇: 1.rsync(一):基本命令和用法 2.rsync(二):inotify+rsync详细说明和sersync 3.rsync算法原理和工作流程分析 4.rsync技术报告( ...
- 文件系统的描述信息-/etc/fstab
/etc/fstab文件包含众多文件系统的描述信息.文件中每一行为一个文件系统的描述,每行的选项之间通过tab分隔,#开头的行会被转换为注释,空白行会被忽略./etc/fstab文件中的设备顺序很重要 ...
- Linux 文件目录管理命令
1.touch 用于设置空白文件或设置文件时间 touch命令参数及作用 参 数 ...
- 8Linux磁盘划分、RAID
磁盘划分fdisk 1.磁盘分区 fdisk 2.格式化 mkfs.ext4 mkfs.xfs 3.挂载 mount 路径 挂载路径 fdisk命令中的参数以及作用 参数 作用m 查看全部可用的参数n ...
- 尚硅谷springboot学习34-整合SpringData JPA
SpringData简介