<!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. Excel文件处理Demo

    1.BLL业务逻辑代码 /// <summary> /// 处理“店铺竞品销售数据”导入文件 /// </summary> /// <param name="f ...

  2. Andriod PopupWindow 键盘冲突

    调起键盘的时候,弹出PopupWindow,但是键盘没有隐藏. private void init() { View contentView = LayoutInflater.from(mContex ...

  3. Unity -- 入门教程一

    首先声明一下,我用的Unity版本是4.6.6,编译环境是VS2010,其余的我会慢慢介绍,安装的过程这里我就不做讲解了,度娘那会做的比我详细.安装包可以在最下面的联系方式找我要,现在开始进入主题.  ...

  4. phonegap工程中修改app的名字

    针对phonegap比较高的版本,我的是6.4.0. 在phonegap工程中,当添加了iOS和android平台或多个平台后,工程进行了开发,然后觉得app的名字想修改一下(比如在手机上显示的app ...

  5. gulp在ionic中的使用

    简介 Gulp是一个基于流的自动化构建器. 安装 npm config set registry http://registry.npm.taobao.org ---最好用国内源 npm instal ...

  6. maven的学习系列(二)—maven的文件夹结构

    maven的文件有自己的组织方式,例如以下所看到的: ---maven ----src ---main ----java ---test ----java -----pom.xml 当运行完mvn c ...

  7. C++ Primer 学习笔记_6_标准库类型 -- 命名空间using与string类型

     标准库类型(一) --命名空间using与string类型 引: 标准库类型是语言组成部分中更主要的哪些数据类型(如:数组.指针)的抽象! C++标准库定义的是高级的抽象数据类型: 1.高级:由 ...

  8. SpringMVC：文件上传

    MultipartFile attach HttpServletRequest re commons-io-2.0.jar (一定要用2.0以上的版本,否则没有copyInputStreamToFil ...

  9. Spring Cloud(十一)：Spring Cloud Zuul网关 Filter、熔断、重试、高可用的使用方式

    上篇文章主要介绍了Zuul网关使用模式,以及自动转发机制,但其实Zuul还有更多的应用场景,比如:鉴权.流量转发.请求统计等等,这些功能都可以使用Zuul来实现. Zuul的核心 Filter是Zuu ...

  10. oracle sqlplus 常用操作

    命令 含义 / 运行 SQL 缓冲区 ? [关键词] 对关键词提供 SQL 帮助 @[@] [文件名] [参数列表] 通过指定的参数,运行指定的命令文件 ACC[EPT] 变量 [DEF[AULT] ...