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. 直线DDA，直线和圆的Bresenham算法

    // DDA.cpp : 定义控制台应用程序的入口点. // #include "stdafx.h" #include<Windows.h> #include<g ...

  2. 记一次在 Get 请求参数为 Null 值的折腾

    先说主要原因,是因为一个 NgZerro 的 Select 组件,需要显示 placeHolder 文字,初始值为 null,然后直接绑定到查询参数中,传输到后端导致 BadRequest,参数解析失 ...

  3. ubuntu gcc 降级 适应matlab

    一.安装gcc 4.7 Ubuntu14.04自带的gcc版本是4.8,MATLAB2014a支持的最高版本为4.7x.因此,需要安装gcc4.7,并给gcc降级 在终端执行gcc 4.7的安装命令: ...

  4. 深入理解JVM(二)--对象的创建

    Java是一门面向对象的语言,在Java程序运行的过程中,无时无刻都会有对象被创建出来,在程序语言中,创建对象(例如克隆,反序列化)通常仅仅是一个new关键字,但是在虚拟机中是怎样的呢?本文主要了解一 ...

  5. vue项目启动报错You may use special comments to disable some warnings.

    在build/webpack.base.conf.js文件中,注释或者删除掉:...(config.dev.useEslint ? [createLintingRule()] : []),

  6. Java 之 方法引用

    方法引用 一.冗余的Lambda场景 来看一个简单的函数式接口以应用Lambda表达式: @FunctionalInterface public interface Printable { void ...

  7. 安卓开发之常见Handler API和 定时器的使用

    package com.lidaochen.test; import android.os.Bundle; import android.os.Handler; import android.supp ...

  8. 如何通过Restful API的方式读取SAP Commerce Cloud的Product图片

    需求:我在SAP Commerce Cloud的backoffice里给某product维护了一些图片: 分别位于Normal,Thumbnails和Others等字段: 现在我想通过Restful ...

  9. [LeetCode] 62. 不同路径 ☆☆☆(动态规划)

    动态规划该如何优化 描述 一个机器人位于一个 m x n 网格的左上角 (起始点在下图中标记为“Start” ). 机器人每次只能向下或者向右移动一步.机器人试图达到网格的右下角(在下图中标记为“Fi ...

  10. array_pop

    array_pop() 函数删除数组中的最后一个元素,返回数组的最后一个值.如果数组是空的,或者非数组,将返回 NULL. <?php$a=["red","gree ...