css父元素背景覆盖其子元素背景
<!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父元素背景覆盖其子元素背景的更多相关文章
- 二、vue学习--父元素如何获取子元素的值,子元素如何获取父元素的值
下图是父元素: 下图是子元素,获取父元素的值,使用props定义属性,这样就可以获取到父元素上传过来的set .place.type,拿到值就可以做一些自己的逻辑处理 二.子元素给父元素传值? 下 ...
- LinearLayout的gravity属性以及其子元素的layout_gravity何时有效;RelativeLayout如何调整其子元素位置只能用子元素中的属性来控制,用RelativeLayout中的gravity无法控制!!!
LinearLayout的gravity属性以及其子元素的layout_gravity何时有效:RelativeLayout如何调整其子元素位置只能用子元素中的属性来控制,用RelativeLayou ...
- 兼容性背景颜色半透明CSS代码(不影响内部子元素)
如何简单兼容性的实现父元素是半透明背景色,而子元素不受影响. 兼容所有浏览器的背景颜色半透明CSS代码: background-color: rgba(, , , .); filter: progid ...
- CSS中如何设置父元素透明度不影响子元素透明度
原因分析: 使用css的opcity属性改变某个元素的透明度,但是其元素下的子元素的透明度也会被改变,即便重定义也没有用,不过有个方法可以实现,大家可以看看. 可以使用一张透明的图片做背景可以达成效果 ...
- 父元素相对定位后,子元素在ie下被覆盖的问题!
<div id="append_parent" style="position: relative;"> <div id="zoom ...
- [css]当父元素的margin-top碰上子元素的margin-top
出现条件:父元素和子元素都设置了margin-top 现象:子元素的margin-top可能会失效,导致父元素和子元素粘连在一起 解决方法: 1.给父元素加padding-top:1px. 2.给父元 ...
- CSS中父元素高度没有随子元素高度的改变而改变,应该如何解决?
如果子元素没有设置浮动(float),父元素实际上会根据内容,自动宽高进行适应的. 当子元素增加了浮动后,最简单的处理方法是给父元素添加overflow:hidden属性,此时父元素的高度会随子元素的 ...
- 【父元素parent】【子元素children】【同胞siblings】【过滤】
1.父元素 $("span").parent() //定位到span的父元素 $("span").parents() // ...
- 父元素高度为auto,子元素使用top:-50%没有效果的问题
无意间在实现元素垂直居中的一种方式测试到,当一个元素高度没有指定的情况下,其 postion:relative;top:-50%;无效 后来查阅w3c看到这样一句话: <percentage&g ...
随机推荐
- 为什么BT网络中迅雷的速度会这么快,比其它BT软件快
先看迅雷加速通道的几个概论,参考:http://www.cnblogs.com/EasonJim/p/6608544.html 我个人理解,在传统BT软件中,基于P2P的网络是不具备以上条件去加速的, ...
- pv,uv
1.PV PV(page view),即页面浏览量:用户每1次对网站中的每个网页访问均被记录1次.用户对同一页面的多次访问,访问量累计. 2.什么是UV uv(unique visitor),指访问某 ...
- 四个很好的开源app项目
Open Source and the iOS App Store Today, we are open-sourcing 4 iOS apps: ThatInbox, an email client ...
- CString和string头文件
在使用了MFC库的工程中CString可以直接使用,在没有使用MFC库的工程中加入#include <atlstr.h> 要使用STL里的string,要加入#include <st ...
- c++ 操作Mysql ado
#pragma once #ifndef DB_MYSQL_H #define DB_MYSQL_H #include "stdafx.h" #include <wins ...
- AMD单双桥时序简叙
芯片组(双桥)时序 VBAT :RTC电路的供电3V(RTC电路有问题会导致没复位或不跑码等故障) RTCCLK :晶振起振给南桥提供32.768KHz频率(RTC电路有问题会导致没复位或不跑码等故障 ...
- Fakeapp2.2安装,使用简记
1,硬件和操作系统,支持cuda的Nvidia显卡,8G及以上的内存,Windows10 x64(推荐,Windows7 x64亲测可行),可以使用gpu-z查看你的显卡详情 我的笔记本是双显卡(都是 ...
- oracle基础操作(1)
以前只是简单用程序操作数据,现在才发现自己没有系统的学习过,所以想在这里记录一下自己在数据库方面遇到的问题,会参考查询网络上一些资料,现在看的是韩顺平oracle视频的笔记: 一.关于oracle系统 ...
- ubuntu 单网卡双 ip
局域网一套物理网络里有两个 ip 段,单网卡设置多 ip 可实现同时访问两个网段. $ cat /etc/network/interfaces # interfaces(5) file used by ...
- 搭建mongoDB 配置副本集 replSet
mongodb的master_slave和ReplSet是很常见的两种构架: 下面记录下搭建mongodbReplSet 的过程: 首先,进入到一个指定目录下 >cd /opt 下载mongod ...