<!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title></title>

         <style>

             .test1{

                 width: 100px;

                 height: 100px;

                 border: 1px solid green;

                 background: green;

                 position: absolute;

                 z-index: auto;

             }

             .test2{

                 width: 100px;

                 height: 100px;

                 border: 1px solid black;

                 background: black;

                 position: relative;

                 left: 20px;

                 top: -20px;

                 z-index: -1;

             }

         </style>

     </head>

     <body>

         <div class="test1">

             <div class="test2"></div>

         </div>

     </body>

 </html>

父元素不设置z-index 的值时，默认是auto。此时在设置子元素的值为负数

aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAYwAAAD3CAIAAACByfSrAAAEFUlEQVR4nO3UgUlEQRAFwR+6mWsCIhwON+1YxQSw8Nh+PgHCnu0HAPxEpIA0kQLSRApIEykgTaSANJEC0kQKSJuP1MOLxieAS0Rq3/gEcIlI7RufAC4RqX3jE8AlIrVvfAK4RKT2jU8Al4jUvvEJ4BKR2jc+AVwiUvvGJ4BLRGrf+ARwiUjtG58ALhGpfeMTwCUitW98ArhEpPaNTwCXiNS+8QngEpHaNz4BXCJS+8YngEtEat/4BHCJSO0bnwAu+eaHPB+Pe+1+5/2rwx8iUiIFaSIlUpAmUiIFaSIlUpAmUiIFaSIlUpAmUiIFaSIlUpAmUiIFaSIlUpAmUiIFaSIlUpAmUiIFaSIlUpAmUiIFaSIlUpAmUiIFaSIlUpAmUiIFaSIlUpAmUiIFaSIlUpAmUiIFaSIlUpAmUiIFaSIlUpAmUiIFaSIlUpAmUiIFaSIlUpAmUiIFaSIlUpAmUiIFaSIlUpAmUiIFaSIlUpAmUiIFaSIlUpAmUiIFaSIlUpAmUiIFaSIlUpAmUiIFaSIlUpAmUiIFaSIlUpAmUiIFaSIlUpAmUiIFaSIlUpAmUiIFaSIlUpAmUiIFaSIlUpAmUiIFaSIlUpAmUiIFaSIlUpAmUiIFaSIlUpAmUiIFaSIlUpAmUiIFaSIlUpAmUiIFaSIlUpAmUiIFaSIlUpAmUiIFaSIlUpAmUiIFaSIlUpAmUiIFaSIlUpAmUiIFaSIlUpAmUiIFaSIlUpAmUiIFaSIlUpAmUiIFaSIlUpAmUgP3/tng/xApkYI0kRIpSBMpkYI0kRIpSBMpkYI0kRIpSBMpkYI0kRIpSBMpkYI0kRIpSBMpkYI0kRIpSBMpkYI0kRIpSBMpkYI0kRIpSBMpkYI0kRIpSPPBgDSRAtJECkgTKSBNpIA0kQLSRApIEykgTaSANJEC0kQKSBMpIE2kgDSRAtJECkgTKSBNpIA0kQLSRApIEykgTaSANJEC0kQKSBMpIE2kgDSRAtJECkgTKSBNpIA0kQLSRApIEykgTaSANJEC0kQKSBMpIE2kgDSRAtJECkgTKSBNpIA0kQLSRApIEykgTaSANJEC0kQKSBMpIE2kgDSRAtJECkgTKSBNpIA0kQLSRApIEykgTaSANJEC0kQKSBMpIE2kgDSRAtJECkgTKSBNpIA0kQLSRApIEykgTaSANJEC0kQKSBMpIE2kgDSRAtJECkgTKSBNpIA0kQLSRApIEykgTaSANJEC0kQKSBMpIE2kgDSRAtJECkgTKSBNpIA0kQLSRApIEykgTaSANJEC0kQKSBMpIE2kgDSRAtJECkgTKSBNpIA0kQLSRApIEykgTaSANJEC0kQKSBMpIE2kgDSRAtJECkgTKSBNpIA0kQLSRApIEykgTaSAtC8DweQ/Y5/AGgAAAABJRU5ErkJggg==" alt="" />

css父元素背景覆盖其子元素背景的更多相关文章

  1. 二、vue学习--父元素如何获取子元素的值，子元素如何获取父元素的值

      下图是父元素: 下图是子元素,获取父元素的值,使用props定义属性,这样就可以获取到父元素上传过来的set .place.type,拿到值就可以做一些自己的逻辑处理 二.子元素给父元素传值? 下 ...

  2. LinearLayout的gravity属性以及其子元素的layout_gravity何时有效；RelativeLayout如何调整其子元素位置只能用子元素中的属性来控制，用RelativeLayout中的gravity无法控制！！！

    LinearLayout的gravity属性以及其子元素的layout_gravity何时有效:RelativeLayout如何调整其子元素位置只能用子元素中的属性来控制,用RelativeLayou ...

  3. 兼容性背景颜色半透明CSS代码（不影响内部子元素）

    如何简单兼容性的实现父元素是半透明背景色,而子元素不受影响. 兼容所有浏览器的背景颜色半透明CSS代码: background-color: rgba(, , , .); filter: progid ...

  4. CSS中如何设置父元素透明度不影响子元素透明度

    原因分析: 使用css的opcity属性改变某个元素的透明度,但是其元素下的子元素的透明度也会被改变,即便重定义也没有用,不过有个方法可以实现,大家可以看看. 可以使用一张透明的图片做背景可以达成效果 ...

  5. 父元素相对定位后，子元素在ie下被覆盖的问题！

    <div id="append_parent" style="position: relative;"> <div id="zoom ...

  6. [css]当父元素的margin-top碰上子元素的margin-top

    出现条件:父元素和子元素都设置了margin-top 现象:子元素的margin-top可能会失效,导致父元素和子元素粘连在一起 解决方法: 1.给父元素加padding-top:1px. 2.给父元 ...

  7. CSS中父元素高度没有随子元素高度的改变而改变，应该如何解决？

    如果子元素没有设置浮动(float),父元素实际上会根据内容,自动宽高进行适应的. 当子元素增加了浮动后,最简单的处理方法是给父元素添加overflow:hidden属性,此时父元素的高度会随子元素的 ...

  8. 【父元素parent】【子元素children】【同胞siblings】【过滤】

    1.父元素 $("span").parent()           //定位到span的父元素 $("span").parents()          // ...

  9. 父元素高度为auto,子元素使用top:-50%没有效果的问题

    无意间在实现元素垂直居中的一种方式测试到,当一个元素高度没有指定的情况下,其 postion:relative;top:-50%;无效 后来查阅w3c看到这样一句话: <percentage&g ...

随机推荐

  1. oceanbase 分布式数据库

    http://blog.csdn.net/maray/article/details/7230881 http://weibo.com/raywill2

  2. intellij idea 提示找不到default activivty

      更换环境之后 ,intellij idea 提示找不到默认的activity.   而查看源代码. 在代码中明显已经设置了默认activity了. 后来发现.程序中有个库工程中的AndroidMe ...

  3. [ACM] hdu 1217 Arbitrage (bellman_ford最短路，推断是否有正权回路或Floyed）

    Arbitrage Problem Description Arbitrage is the use of discrepancies in currency exchange rates to tr ...

  4. CSDN站点系统升级公告

    各位尊敬的CSDN用户: 你们好. CSDN站点将于2015年12月17日23时-12月18日08时进行系统升级维护,升级维护期间,CSDN站点将会受到影响.可能会导致博客.下载频道及站点其它功能无法 ...

  5. 浅谈PropertyChanged是如何被初始化的？

    http://www.cnblogs.com/wpcockroach/p/3909081.html

  6. android页面间传递对象

    android传递对象有两种方式: 一种是Serializable和Parcelable 对于第一种方式: import java.io.Serializable; public class Shop ...

  7. HMM MEMM CRF 差别 联系

    声明:本文主要是基于网上的材料做了文字编辑,原创部分甚少.參考资料见最后. 隐马尔可夫模型(Hidden Markov Model.HMM),最大熵马尔可夫模型(Maximum Entropy Mar ...

  8. 升级iOS8和iOS9系统后，保险箱Pro、私人保险箱、私密相冊打开就闪退的官方解决方式

    升级iOS8和iOS9.iOS10系统后,保险箱Pro.私人保险箱.私密相冊打开就闪退的官方解决方式 查看设备iOS操作系统版本号号办法:iPhone/iPad->设置->通用->关 ...

  9. Linux多线程编程的条件变量

    在stackoverflow上看到一关于多线程条件变量的问题,题主问道:什么时候会用到条件变量,mutex还不够吗?有个叫slowjelj的人做了很好的回答,我再看这个哥们其他话题的一些回答,感觉水平 ...

  10. Active Directory组织单位(Organizational Unit)操作汇总

    前言 本章聊Active Directory的组织单位(OU)的新增.修改.移动等操作,使用.NET Framework 为我们提供的System.DirectoryServices程序集. 不积跬步 ...