子元素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 ...
随机推荐
- 记录7: office 2016 Mac不能使用的解决过程
前几天更新硬盘并升级到high sierra后,今天第一次打开word/excel发现用不了,提示让我进行active.很奇怪,之前的license应该是一直有效的.于是去www.office.com ...
- tensorflow/threading 用到的一些函数
---恢复内容开始--- import tensorflow as tf 1 tf.squeeze([1,2,3,4]) 删除所有为1的维度 eg shape从(1,2,3,1)到(2,3 ...
- vue搜索功能
<!DOCTYPE html><html><head><meta charset="utf-8"><title>Vue测 ...
- JSON.stringify()的深度使用
在使用JSON.stringify()对JSON数据进行序列化时 1> 如果里面的属性是function,则会被忽略 const data = { a: 'a', fn: funciton() ...
- echarts统计图Y轴（或X轴）文字过长问题解决
echarts 统计图Y轴文字过长 在使用echarts时,出现数值非常大,Y轴又显示不下的情况就需要压缩Y轴数值刻度. 解决方法: yAxis: { type: 'value', axisLabel ...
- 二、Python-运算符、控制及循环语句
一.运算符 算数运算符 +:加 -:减 *:乘 /:除 ~:取反 %:求余数(只返回余数) //:取整数(只返回整数部分) **:幂,返回x的y次方 赋值运算符:= 比较运算符:<小于.< ...
- ubuntu安装带调试功能的bochs
①进入bochs官网下载源码包 说明 用安装包直接安装没有调试功能 下载源码包步骤 a.输入网址:http://bochs.sourceforge.net/ b.单击图中红色标注图标 c.单击图中红色 ...
- SpringCloud系列七：Hystrix 熔断机制（Hystrix基本配置、服务降级、HystrixDashboard服务监控、Turbine聚合监控）
1.概念:Hystrix 熔断机制 2.具体内容 所谓的熔断机制和日常生活中见到电路保险丝是非常相似的,当出现了问题之后,保险丝会自动烧断,以保护我们的电器, 那么如果换到了程序之中呢? 当现在服务的 ...
- 循环队列搜索 Search in Rotated Sorted Array
这里比较重要的是,不要一上来就判断mid 和 target有没有关系.因为数组是无序的,这样的判断毫无结论,只会搞的更复杂.应该先想办法判断出哪一侧是有序的. class Solution { pub ...
- Python学习日记 --day4
list列表: # # 列表 ''' # 增 # li = [1,'qwer','小明',[1,2,'qwe']] # print(li[0],type(li)) # 跟字符串的操作方法是一样的,返回 ...