元素z-index继承问题

两同层元素,其中一个的子元素定位与另一个重叠时,该子元素被覆盖(此时子元素的z-index继承的是其父元素的z-index,无论其z-index多少均被覆盖)

<html>
<head>
<style>
#blue{
background:blue;
z-index:1;
}
#w1{
background:red;
position:relative;
z-index:21;
}
#w2{
background:pink;
position:relative;
z-index:21;
}
#w3{
background:grey;
position:relative;
top:11px;
z-index:22;
}
</style>
</head>

<body>
<div id="blue">
 <div id="w1">
  <div id="w3">3</div>
 </div>
 <div id="w2">2</div>
</div>

</body>

</html>

3

2

时间: 2024-07-30 07:58:31

元素z-index继承问题的相关文章

jQuery DOM 元素方法 - index() 方法

元素的 index,相对于选择器 获得元素相对于选择器的 index 位置. 该元素可以通过 DOM 元素或 jQuery 选择器来指定. 语法 $(selector).index(element) $(".hot").index($("#favorite"))  #favorite相对于指定于其他.hot的位置 <meta charset="utf-8"><title>菜鸟教程(runoob.com)</title

表单元素默认不继承样式

难题 可能有人已经注意到了,有时button或者input是不会默认继承样式的,尤其是font,直观就能看出来了. 原因 根据SO的回答,因为浏览器会采用系统默认的样式来渲染大部分的表单元素,而且这个默认的样式文件还能找到.想深入了解的可以戳下方参考文档链接. 方案 主动加上inherit,并不是什么好方案,但是也没找到更好的. .form-element { font:inherit; } 参考文档: Why textarea and textfield not taking font-fam

关于opacity透明度子元素继承现象的若干研究以及hack方法

[感想]信息时代的信息是有时效性的,今天是确确实实感受到了.互联网资料虽然丰富,但是质量不一,还有大量的跟风雷同,很多人都是随手拷贝过来,根本没有实践.以前端为例,这两年浏览器的迅猛发展,造成很多原有知识的失效.但是网上还是大量充斥了以前失效的解决方案.我觉得,我们应本着实践精神,对任何问题的解决方案进行实际测试.须知:纸上得来终觉浅,绝知此事要躬行. 今天遇到一个关于透明度的问题. 大家都知道在css3中增加的新属性opacity——不透明度的设定. 使用了opacity的元素,它的不透明度会

子元素继承父元素透明度问题。

在写CSS的发现,将父元素的opacity设置为0.5之后,子元素一定会继承这个属性,且对子元素单独设置opacity,也无效. 1 #texts{ 2 height: 30px; 3 width:380px; 4 background: #000000; 5 position: absolute; 6 top: 270px; 7 color: #FFFFFF; 8 z-index: 997; 9 font-size: 12px; 10 opacity: 0.5; 11 } 12 .textRi

c/c++: c++继承 内存分布 虚表 虚指针 (转)

http://www.cnblogs.com/DylanWind/archive/2009/01/12/1373919.html 前部分原创,转载请注明出处,谢谢! class Base { public:  int m_base; }; class DerivedA: public Base { public:  int m_derivedA; }; class DerivedB: public Base { public:  int m_derivedB; }; class DerivedC

Java学习笔记--继承和多态(下)

1.通过继承来开发超类(superclass) 2.使用super 关键词唤起超类的构造方法 3.在超类中覆盖方法 4.区分override和overload 5.在Object类中探索toString()类 6.发现多态性和动态绑定 7.描述解释为什么向下转型是必须的 8.在Object类中探索equals 方法 9.存储,取回,实现ArrayList的对象 10.使用ArrayList类实现Stack 11.超类中使用数据和方法,protected 12.使用final模块来禁止类和方法的覆

Z 字形变换 C++实现 java实现 leetcode系列(六)

Z 字形变换  java实现 C++实现  将一个给定字符串根据给定的行数,以从上往下.从左到右进行 Z 字形排列. 比如输入字符串为 "LEETCODEISHIRING" 行数为 3 时,排列如下: L C I R E T O E S I I G E D H N 之后,你的输出需要从左往右逐行读取,产生出一个新的字符串,比如:"LCIRETOESIIGEDHN". 请你实现这个将字符串进行指定行数变换的函数: string convert(string s, in

jquery 选择器(name,属性,元素)大全

jQuery 选择器大体上可分为:基本选择器.层次选择器.过滤选择器.表单选择器. 其中过滤选择器可以分为:简单过滤选择器.内容过滤选择器.可见性过滤选择器.属性过滤选择器.子元素过滤选择器.表单对象属性过滤选择器.选择器是jQuery最基础的东西,下面向大家介绍jquery+%D1%A1%D4%F1%C6%F7/" target="_blank">jquery 选择器的用法 选择器是jQuery的核心组成部分,因为使用jQuery操作DOM时所做的每件事都和选择器密切

css中可以和不可以继承的属性

不可继承的:display.margin.border.padding.background.height.min-height.max- height.width.min-width.max-width.overflow.position.left.right.top. bottom.z-index.float.clear.table-layout.vertical-align.page-break-after. page-bread-before和unicode-bidi. 不及继承:也就是