<!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. 邁向IT專家成功之路的三十則鐵律 鐵律十：IT人思維之道-跳脫框架

    莊子的哲學思想歸本於老子,他認為人要解脫束縛必須做到不從任何的角度與任何的時間來看待事物,而是必須與天地同體,然而也唯有如此才能看清宇宙間萬事萬理的真諦.無論是莊子還是老子,他們畢竟是中國古代的聖賢, ...

  2. 转： MySQL索引原理及慢查询优化 （from 美团技术博客）

    转: http://tech.meituan.com/mysql-index.html MySQL凭借着出色的性能.低廉的成本.丰富的资源,已经成为绝大多数互联网公司的首选关系型数据库.虽然性能出色, ...

  3. SQL_字符操作函数

    原创作品.出自 "深蓝的blog" 博客.欢迎转载,转载时请务必注明下面出处,否则追究版权法律责任. 深蓝的blog:http://blog.csdn.net/huangyanlo ...

  4. Solaris之单用户模式

    1.TERM 表示终端 vt100 是简单的终端模式 export TERM=vt100 在此模式下,方向键无效,用字母键 有很多环境变量,PATH .PS1 .TERM 一般在屏幕上写的都是暂时的, ...

  5. Linux CenOS Python3 和 python2 共存

    1.查看是否已经安装Python CentOS 7.2 默认安装了python2.7.5 因为一些命令要用它比如yum 它使用的是python2.7.5. 使用 python -V 命令查看一下是否安 ...

  6. uboot下载地址

    非常奇怪百度搜索都搜不到一个好的uboot下载的说明,仅此标记 HOME http://www.denx.de/wiki/U-Boot/SourceCode sourcecode http://www ...

  7. Introducing Gradle (Ep 2, Android Studio)

    https://www.youtube.com/watch?v=cD7NPxuuXYY    Introducing Gradle (Ep 2, Android Studio) https://www ...

  8. 个人开发者帐号--我是如何实现在另一台mac上真机调试的

    本文转载至 : http://blog.csdn.net/chenyong05314/article/details/8689534   注:本人有一台mac电脑,之前申请开发者帐号的时候直接就是在这 ...

  9. 51 NOD 1753 相似子串 字符串hash

      1735  相似子串  基准时间限制:5 秒 空间限制:131072 KB 分值: 80   两个字符串相似定义为:1.两个字符串长度相等2.两个字符串对应位置上有且仅有至多一个位置所对应的字符不 ...

  10. DuiLib笔记之CDuiString的bug

    在C/C++中,当使用==比较两个对象时,推荐的风格是将常量置前 例如 if (0 == variable) { ... } 但在DuiLib中,CDuiString存在一个bug:在用==进行比较时 ...