CSS中的z-index属性如何使用
z-index属性介绍
- 只有设置了定位我们才会使用到该
z-index属性，如：固定定位、相对定位、绝对定位。 - 定位元素默认的
z-index属性值是0。 - 如果
2个定位的元素都没有设置z-index属性，后者会覆盖到前者。 - 如果
2个定位的元素都设置了z-index属性，并且数值一样大还是后者会覆盖到前者。 z-index属性的属性值大的就会覆盖小，就是设置元素的层级。
z-index属性实践
用实践证明这句话，如果
2个定位的元素都没有设置z-index属性，后者会覆盖到前者。代码块
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>z-index属性</title>
<style>
div{
width: 200px;
height: 200px;
}
.div1{
background-color: red;
position: relative;
top: 50px;
left: 50px;
}
.div2{
background-color: slateblue;
position: relative;
left: 100px;
}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
</body>
</html>
结果图
- 用实践来证明这句话，如果
2个定位的元素都设置了z-index属性，并且数值一样大还是后者会覆盖到前者。 代码块
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>z-index属性</title>
<style>
div{
width: 200px;
height: 200px;
}
.div1{
background-color: red;
position: relative;
top: 50px;
left: 50px;
z-index: 2;
}
.div2{
background-color: slateblue;
position: relative;
left: 100px;
z-index: 2;
}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
</body>
</html>
结果图
用实践来证明这句话，
z-index属性的属性值大的就会覆盖小，就是设置元素的层级。代码块
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>z-index属性</title>
<style>
div{
width: 200px;
height: 200px;
}
.div1{
background-color: red;
position: relative;
top: 50px;
left: 50px;
z-index: 3;
}
.div2{
background-color: slateblue;
position: relative;
left: 100px;
z-index: 2;
}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
</body>
</html>
结果图
CSS中的z-index属性如何使用的更多相关文章
- CSS中具有继承性的属性：
CSS中具有继承性的属性: color:#eee font: font-style font-variant: font-weight:bold font-size font-family: fo ...
- 妙味css3课程---1-1、css中自定义属性可以用属性选择器么
妙味css3课程---1-1.css中自定义属性可以用属性选择器么 一.总结 一句话总结:可以的. 1.如何实现用属性选择器实现a标签根据href里面含有的字段选择背景图片? p a[href*=te ...
- css3系列-2.css中常见的样式属性和值
css3系列-2.css中常见的样式属性和值 继续上一篇文章的继续了解css的基础知识,关注我微信公众号:全栈学习笔记 css中常见的样式属性和值 字体与颜色 背景属性 文本属性 边框属性 内外边距 ...
- 总结一下CSS中的定位 Position 属性
在CSS中,Position 属性经常会用到,主要是绝对定位和相对定位,简单的使用都没有问题,尤其嵌套起来,就会有些混乱,今记录总结一下,防止久而忘之. CSS position 属性值: absol ...
- css中overflow:hidden的属性 可能会导致js下拉菜单无法显示
css中overflow:hidden属性导致ExtJS中无法显示下拉滚动条 overflow属性: visible 默认.内容不会被修剪,会呈现在元素之外. hidden 内容会被修剪,但是浏览器不 ...
- CSS中默认被继承的属性
在CSS中,所有属性都可以被继承,只需要显式的设置属性值为inherit即可.如果不设置该属性,CSS大部分属性默认不会从父元素继承而是设置初始值(initial value),但是有一部分属性,默认 ...
- css 中可以继承的属性
CSS中可以和不可以继承的属性一.无继承性的属性 1.display:规定元素应该生成的框的类型 2.文本属性: vertical-align:垂直文本对齐 text-decoration:规定添加到 ...
- css中可以继承的属性
声明 : 本文源于https://www.cnblogs.com/thislbq/p/5882105.html CSS中可以和不可以继承的属性 一.无继承性的属性 1.display:规定元素应该 ...
- CSS中px和em属性的特点与区别
详解px和em的特点和区别象素px是我们在定义CSS中经常用到的尺寸大小单位,而em在国外网站中经常被使用,px和em之间究竟有什么区别和特点呢?◆px像素(Pixel),相对长度单位.像素px是相对 ...
- [转]总结一下CSS中的定位 Position 属性
在CSS中,Position 属性经常会用到,主要是绝对定位和相对定位,简单的使用都没有问题,尤其嵌套起来,就会有些混乱,今记录总结一下,防止久而忘之. CSS position 属性值: absol ...
随机推荐
- SpringBoot整合WEB开发--（九）整合Servlet,Filter,Listener
简介: 如果需要整合第三方框架时,可能还是不得不使用Servlet,Filter,Listener,Springboot中也有提供支持. @WebServlet("/my") pu ...
- jQuery---手风琴案例+stop的使用（解决动画队列的问题）
手风琴案例+stop的使用(解决动画队列的问题) stop();// 停止当前正在执行的动画 <!DOCTYPE html> <html lang="en"> ...
- laravel框架api路由
Route::group(['namespace' => 'Api'], function (){ Route::any('send','SmsController@send'); }); gr ...
- 0004 工程配置settings.py
两个目录的区别: 工程目录是指包含manage.py文件的目录 配置目录是批包含settings.py文件的目录 在配置目录中找到并打工settings.py文件,做以下配置: 01 DEBUG DE ...
- php私有组件以及创建自己的composer私有组件（packagist+git+composer）
1.私有组件 大多数时候我们使用的都是公开可用的开源组件,但有时候如果公司使用内部开发的PHP组件,而基于许可证和安全方面的问题不能将其开源,就需要使用私有组件.对Composer而言,这是小菜一碟. ...
- AtCoder Beginner Contest 154 题解
人生第一场 AtCoder,纪念一下 话说年后的 AtCoder 比赛怎么这么少啊(大雾 AtCoder Beginner Contest 154 题解 A - Remaining Balls We ...
- java mail发送html格式的邮件
// 获取系统属性 Properties properties = System.getProperties(); // 设置邮件服务器 properties.setProperty("ma ...
- Python自定义任务发邮件提醒
前言 在工作中,有时会有一些定期需要执行的任务或在将来某一天需要执行的任务,为避免疏漏,设计个小工具,发邮件提醒自己去处理. 方案简介 1.建立一个Excel文件,里面定义好待提醒的任务 2.建立一个 ...
- [0CTF 2016]piapiapia{PHP反序列化漏洞（PHP对象注入）}
先上学习链接: https://www.freebuf.com/column/202607.html https://www.cnblogs.com/ichunqiu/p/10484832.html ...
- 白面系列 redis
redis是Key-Value数据库,和Memcached类似.value可以是多种类型,如Strings, Lists, Hashes, Sets 及 Ordered Sets等. redis一个牛 ...