1.正常情况，按照顺序，最后的盒子在最上面，默认z-index为0
2.当使用z-index，数字越大，越优先显示在上面
3.注意，只要定位的盒子才可以使用该方法
<body>

    <div class="box1">注意，只要定位的盒子才可以使用该方法</div>

    <div class="box2">当使用z-index，数字越大，越优先显示在上面</div>

    <div class="box3">正常情况，按照顺序，最后的盒子在最上面，默认z-index为0</div>

</body>
<style>

        .box1 {

            width: 300px;

            height: 300px;

            background: rgb(215, 230, 14);

            position: absolute;

        }

        .box2 {

            width: 300px;

            height: 300px;

            background: rgb(219, 12, 12);

            position: absolute;

            left: 100px;

            top: 100px;

            z-index:;

        }

        .box3 {

            width: 300px;

            height: 300px;

            background: rgb(110, 12, 223);

            position: absolute;

            left: 200px;

            top: 200px;

        }

    </style>

 

定位的盒子叠放顺序z-index的更多相关文章

  1. CSS.05 -- 规避脱标 定位的盒子居中、CSS标签规范、溢出隐藏、内容移除（网页优化）、CSS精灵图

    规避脱标   定位的盒子居中显示 Margin:0 auto : 只能让标准流的盒子居中对齐 当A是B的父系,B可以使用 margin-left:auto: 来获得相当于定位right:0:的效果 M ...

  2. vue项目中主要文件的加载顺序（index.html、App.vue、main.js）

    先后顺序: index.html > App.vue的export外的js代码 > main.js > App.vue的export里面的js代码 > Index.vue的ex ...

  3. css实现网页缩放时固定定位的盒子与版心一同缩放

    在网页设计过程中我们可能会出现这种情况:设置好一个固定定位的盒子,但是当网页缩放时固定定位的盒子与网页的版心分离 这是因为css定位中的固定定位是以页面为参照进行定位的,而不是以版心盒子为参照,那么我 ...

  4. flex组合流动布局实例---利用css的order属性改变盒子排列顺序

    flex弹性盒子 <div class="container"> <div class="box yellow"></div> ...

  5. windows定位dll的搜索顺序

    原文:http://blog.csdn.net/zzxian/article/details/6429293 Visual C++ Windows 用来定位 DLL 的搜索路径 通过隐式和显式链接,W ...

  6. vue项目中主要文件的加载顺序（index.html、main.js、App.vue）

    todo: https://www.cnblogs.com/xifengxiaoma/p/9493544.html https://www.cnblogs.com/stella1024/p/10563 ...

  7. 前端2 — CSS — 更新完毕

    1.CSS是什么? 指:Cascading Style Sheet  --- 层叠样式表 CSS 即:美化网页( 在HTML不是说过W3C规定网页为三种标准嘛,结构层HTML已经玩了,而这个CSS就是 ...

  8. HTML设计模式学习笔记

    本周我主要学习了HTML的设计模式,现将我的学习内容总结如下: 一．盒模型的学习 CSS中有一种基础的设计模型叫做盒模型,它定义了元素是如何被看做盒子来解析的.我主要学习了六种盒模型,分别为内联盒模型 ...

  9. 认识CSS中布局之文档流、浮动、定位以及叠放次序

    前端之HTML,CSS(七) CSS CSS布局的核心就是盒子的摆放,即CSS定位.而CSS中定位机制分为:普通流(nomal flow).浮动(float).定位(position). 普通流 普通 ...

随机推荐

  1. Create your first Java application

    参考链接 -[IntelliJ IDEA] https://www.jetbrains.com/help/idea/creating-and-running-your-first-java-appli ...

  2. Linux系统模拟发送HTTP的get和post请求

    一.get请求: 1.使用curl命令: curl “http://www.baidu.com” 如果这里的URL指向的是一个文件或者一幅图都可以直接下载到本地 curl -i “http://www ...

  3. 玩转Spring全家桶笔记 03 Spring的JDBC操作以及SQL批处理的实现

    1 spring-jdbc core JdbcTemplate 等相关核心接口和类(核心) datesource 数据源相关的辅助类(内嵌数据源的初始化) object 将基本的JDBC操作封装成对象 ...

  4. (六) Docker 部署 Redis 高可用集群 (sentinel 哨兵模式)

    参考并感谢 官方文档 https://hub.docker.com/_/redis GitHub https://github.com/antirez/redis happyJared https:/ ...

  5. vue中使用iview组件库实现图片的上传

    vue文件如下: iview中Upload 属性详情 https://www.iviewui.com/components/upload js文件 :

  6. windows下安装hexo和生成博客

    首先在电脑上安装node和git,这个只要在相关官网的下载然后一步安装即可. 然后在你的电脑上新建一个文件夹,用来存放你的博客文件,比如创建hexo 进入该文件,右键打开git bash 安装hexo ...

  7. js原型，原型链

    先铺垫下原型规则: 1.所有的引用类型(数组,对象,函数)都具有对象特性,可自由扩展属性(出了null外) 2.所有的引用类型(数组,对象,函数)都有一个__proto__属性(隐式原型),属性值是一 ...

  8. Java 之 Stream 流

    Stream流 在Java 8中,得益于Lambda所带来的函数式编程,引入了一个全新的Stream概念,用于解决已有集合类库既有的弊端 一.传统遍历 1.传统集合的多步遍历代码 几乎所有的集合(如 ...

  9. day35-python之协程

    1.协程 # import time # import queue # # def consumer(name): # # print("--->ready to eat baozi. ...

  10. nginx mirror/post_action+gor实现https流量复制

    关于gor: 参考: https://www.cnblogs.com/jinjiangongzuoshi/p/11773070.html https://github.com/buger/gorepl ...