子元素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 ...
随机推荐
- 把JavaScript对象转化成JSON对象
js => jsonvar jsonVar = {key: value}var jsonString = JSON.stringify(jsonVar) //将JS对象转换为JSON字符串va ...
- JDK中所包含的设计模式
本文主要是归纳了JDK中所包含的设计模式,包括作用和其设计类图.首先来个总结,具体的某个模式可以一个一个慢慢写,希望能对研究JDK和设计模式有所帮助. 一.设计模式是什么(1)反复出现问题的解决方案( ...
- objective-c数组的七种遍历方法总结
//第一种 [arr enumerateObjectsUsingBlock: ^(id obj, NSUInteger idx, BOOL *stop){ NSLog(@"%ld,% ...
- chrome 如何开启网页另存为.mhtml 功能
打开chrome浏览器,输入地址:chrome://flags/ 找到将网页另存为MHTML,点击启用就可以了. 或者直接输入:chrome://flags/#save-page-as-mhtml
- 《深入理解java虚拟机》读书笔记——垃圾收集与内存分配策略
可回收判定两种算法 引用计数法(Reference Counting):引用为0时可回收. 可达性分析法(Reachability Analysis): 从GCRoots对象到这个对象不可达. GCR ...
- ORM版学员管理系统 3
老师信息管理 思考 三种方式创建多对多外键方式及其优缺点. 通过外键创建 class Class(models.Model): id = models.AutoField(primary_key=Tr ...
- SpringCloud系列四：Eureka 服务发现框架（定义 Eureka 服务端、Eureka 服务信息、Eureka 发现管理、Eureka 安全配置、Eureka-HA(高可用) 机制、Eureka 服务打包部署）
1.概念:Eureka 服务发现框架 2.具体内容 对于服务发现框架可以简单的理解为服务的注册以及使用操作步骤,例如:在 ZooKeeper 组件,这个组件里面已经明确的描述了一个服务的注册以及发现操 ...
- go 语言学习笔记（一）
本次学习目的:熟悉了解 go 语言特点,实现基本功能. 1.readfile.go package main import ( "bufio" "fmt" &q ...
- Golang源码探索(二) 协程的实现原理（转）
Golang最大的特色可以说是协程(goroutine)了, 协程让本来很复杂的异步编程变得简单, 让程序员不再需要面对回调地狱,虽然现在引入了协程的语言越来越多, 但go中的协程仍然是实现的是最彻底 ...
- CentOS编译安装软件过程中遇到zlib.h: No such file or directory
使用命令:yum install zlib-devel 解决问题.