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属性如何使用的更多相关文章

  1. CSS中具有继承性的属性：

    CSS中具有继承性的属性:   color:#eee font: font-style font-variant: font-weight:bold font-size font-family: fo ...

  2. 妙味css3课程---1-1、css中自定义属性可以用属性选择器么

    妙味css3课程---1-1.css中自定义属性可以用属性选择器么 一.总结 一句话总结:可以的. 1.如何实现用属性选择器实现a标签根据href里面含有的字段选择背景图片? p a[href*=te ...

  3. css3系列-2.css中常见的样式属性和值

    css3系列-2.css中常见的样式属性和值 继续上一篇文章的继续了解css的基础知识,关注我微信公众号:全栈学习笔记 css中常见的样式属性和值 字体与颜色 背景属性 文本属性 边框属性 内外边距 ...

  4. 总结一下CSS中的定位 Position 属性

    在CSS中,Position 属性经常会用到,主要是绝对定位和相对定位,简单的使用都没有问题,尤其嵌套起来,就会有些混乱,今记录总结一下,防止久而忘之. CSS position 属性值: absol ...

  5. css中overflow:hidden的属性 可能会导致js下拉菜单无法显示

    css中overflow:hidden属性导致ExtJS中无法显示下拉滚动条 overflow属性: visible 默认.内容不会被修剪,会呈现在元素之外. hidden 内容会被修剪,但是浏览器不 ...

  6. CSS中默认被继承的属性

    在CSS中,所有属性都可以被继承,只需要显式的设置属性值为inherit即可.如果不设置该属性,CSS大部分属性默认不会从父元素继承而是设置初始值(initial value),但是有一部分属性,默认 ...

  7. css 中可以继承的属性

    CSS中可以和不可以继承的属性一.无继承性的属性 1.display:规定元素应该生成的框的类型 2.文本属性: vertical-align:垂直文本对齐 text-decoration:规定添加到 ...

  8. css中可以继承的属性

    声明 : 本文源于https://www.cnblogs.com/thislbq/p/5882105.html CSS中可以和不可以继承的属性   一.无继承性的属性 1.display:规定元素应该 ...

  9. CSS中px和em属性的特点与区别

    详解px和em的特点和区别象素px是我们在定义CSS中经常用到的尺寸大小单位,而em在国外网站中经常被使用,px和em之间究竟有什么区别和特点呢?◆px像素(Pixel),相对长度单位.像素px是相对 ...

  10. [转]总结一下CSS中的定位 Position 属性

    在CSS中,Position 属性经常会用到,主要是绝对定位和相对定位,简单的使用都没有问题,尤其嵌套起来,就会有些混乱,今记录总结一下,防止久而忘之. CSS position 属性值: absol ...

随机推荐

  1. nodeJS菜鸟教程笔记

    http模块 var http = require('http'); // 引入http模块 var url = require('url'); // 引入url模块 var querystring ...

  2. Codeforces Round #614 (Div. 2) D

    变色失败 只加8分 距离变色只差5分 B题没想到那么简单,结论秒猜,不敢交,傻傻验证5分钟. C题也想了码了好一会儿,我动态维护set做的. 1小时3题,整体难度好像没以前那么大了?(虽然也不强,但比 ...

  3. 零基础入门 Kubernetes，你需要知道这些

    Kubernetes是什么? 大概很多人对此都有疑问,不过在容器领域,Kubernetes却无人不晓. 阿里.字节跳动.腾讯.百度等中国互联网行业巨擘们,近年来都在深耕容器领域,而Kubernetes ...

  4. Pi和e的积分

    Evaluate integral $$\int_{0}^{1}{x^{-x}(1-x)^{x-1}\sin{\pi x}dx}$$ Well,I think we have $$\int_{0}^{ ...

  5. C++——指针4

    8.对象指针  声明: 类名 *对象指针名 Point A(5,10): Point *ptr; ptr=&A;//通过指针访问对象成员:对象指针名->成员名.ptr->getX( ...

  6. windows 10 安装使用kafka

    1.安装java环境 自行百度 2. 下载.安装Kafka 打开 下载地址 http://kafka.apache.org/downloads.html 下载二进制文件 Kafka包名组成: Scal ...

  7. 关于vue :style 的几种使用方式

    :style的使用 一 ,最通用的写法 <p :style="{fontFamily:arr.conFontFamily,color:arr.conFontColor,backgrou ...

  8. ACWing 238 银河英雄传说

    最近带权并查集这块比较薄弱,直接看食物链看不懂,就老实一步步来了. 有一个划分为N列的星际战场,各列依次编号为1,2,…,N. 有N艘战舰,也依次编号为1,2,…,N,其中第i号战舰处于第i列. 有T ...

  9. vba工程密码清除

    EXCEL vba工程密码破解 方法一:这种方法实际是避开VBA工程密码验证,即骗vba编辑器,该密码输入成功,请求放行.不管他是破解还是欺骗 能达到我们的目的角开就行________________ ...

  10. 巨杉Tech｜SequoiaDB 巨杉数据库高可用容灾测试

    数据库的高可用是指最大程度地为用户提供服务,避免服务器宕机等故障带来的服务中断.数据库的高可用性不仅仅体现在数据库能否持续提供服务,而且也体现在能否保证数据的一致性. SequoiaDB 巨杉数据库作 ...