子元素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 ...
随机推荐
- 检测Tensorflow可用设备(比如:显卡)
打开python命令行,输入以下命令: python -c "from tensorflow.python.client import device_lib;device_lib.list_ ...
- asp微信支付代码v4.1无需证书版,带回调入库的asp支付源码
昨天帮一个客户写的,他的程序是老的asp,想实现微信在手机上下单付款,让帮忙给写一份asp微信支付的接口代码,昨天晚上闲着没事,搞了一个晚上才搞好,其实asp支付并不需要安装证书,其实asp支付也很好 ...
- Source Insight 4.0安装后首次打开报错Unable to open or create
错误提示大概如下: Unable to open or create ....我的文档/source insght4.0/xxx.sidb. 这个错误提示就是找不到这个文件,原因是应为有中文路径,那么 ...
- Linux SVN 操作详解（转）
1.将文件checkout到本地目录 svn checkout path(path是服务器上的目录) 例如:svn checkout svn://192.168.1.1/pro/domain ...
- android 手机权限管理——PermissionsDispatcher
Android6.0 之后某些权限需要动态申请,相比于之前版本复杂了许多.不过已经有大神给我们写好了框架(PermissionsDispatcher),我们用起来还是很方便. 1.添加引用 根据 gr ...
- 微信公众号openid处理的一些笔记
每个用户对每个公众号的OpenID是唯一的.对于不同公众号,同一用户的openid不同.如果公司有多个公众号,可以通过开放平台关联,这样同一用户,对同一个微信开放平台下的不同应用,unionid是相同 ...
- CWindowDC与CClientDC，CPaintDCC的区别
[转] CClientDC: (客户区设备上下文)用于客户区的输出,与特定窗口关联,可以让开发者访问目标窗口中客户区,其构造函数中包含了GetDC,析构函数中包含了ReleaseDC. 用法是:C ...
- qt学习001之运行对话框
使用QT实现Window下运行对话框 1.摆放控件 首先设置并摆放相应的对话框控件,并更改相应名称: 2.实现功能 1)在文本框中输入信息后,点击确定或回车可以运行系统中相应的程序: 点 ...
- gridcontrol 根据某一列数据来控制其他列合并
首先需要属性栏中设置这一列可以合并,再在CellMerge方法中写 private void gridView1_CellMerge(object sender, DevExpress.XtraGri ...
- Shopt命令(删除排除)
有时候我们需要反选某个文件以外的其他文件,就会用到rm -rf!(file)命令,但是有时候这条命令会报错显示 -bash: !: event not found 解决办法:shopt -s extg ...