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 ...
随机推荐
- 正确使用Block避免Cycle Retain和Crash
Block简介 Block作为C语言的扩展,并不是高新技术,和其他语言的闭包或lambda表达式是一回事.需要注意的是由于Objective-C在iOS中不支持GC机制,使用Block必须自己管理内存 ...
- mac apache配置虚拟主机
设置虚拟主机 在终端运行“sudo vi /etc/apache2/httpd.conf”,打开Apche的配置文件 在httpd.conf中找到“#Include /private/etc/apac ...
- maven编译maven-surefire-plugin插件报错
1.编译错误信息: [INFO] ------------------------------------------------------------------------ [ERROR] Fa ...
- 在.NET中怎样取得代码行数
文章目的 介绍在.NET中取得代码行数的方法 代码 [STAThread] static void Main(string[] args) { ReportError("Yay!" ...
- ffmpeg 内存池
ffmpeg 部分内存管理采用 了内存池技术.基本的接口在libavutil目录下的buffer.c文件中实现: 1. av_buffer_pool_init 初始化 内存池 2 av_buffer_ ...
- C结构体对齐
函数模板针对仅参数类型不同的函数? http://blog.csdn.net/renrenhappy/article/details/5931457 计算结构体的大小就要考虑数据对齐问题. ...
- NAT和桥接的区别
NAT 桥接 NAT相当于是局域网中的局域网,把192.168.21.1当作外网ip,重新划分了一个网关(192.168.33.x) 网桥只是把网络桥接起来,还是原来的网关(192.168.21.x) ...
- centos7下memcached的安装配置
memcached 依赖 libevent-devel 首先安装libevent-devel yum -y install libevent-devel 安装完毕! 继续安装memcached yum ...
- Linux驱动经典面试题目
1. linux驱动分类 2. 信号量与自旋锁 3. platform总线设备及总线设备怎样编写 4. kmalloc和vmalloc的差别 5. module_init的级别 6. 加入 ...
- $modal 参数 以及 使用方法
$modal是一个可以迅速创建模态窗口的服务,创建部分页,控制器,并关联他们 $modal仅有一个方法open(options) templateUrl:模态窗口的地址 template:用于显示ht ...