定位的盒子叠放顺序z-index
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的更多相关文章
- CSS.05 -- 规避脱标 定位的盒子居中、CSS标签规范、溢出隐藏、内容移除（网页优化）、CSS精灵图
规避脱标 定位的盒子居中显示 Margin:0 auto : 只能让标准流的盒子居中对齐 当A是B的父系,B可以使用 margin-left:auto: 来获得相当于定位right:0:的效果 M ...
- vue项目中主要文件的加载顺序（index.html、App.vue、main.js）
先后顺序: index.html > App.vue的export外的js代码 > main.js > App.vue的export里面的js代码 > Index.vue的ex ...
- css实现网页缩放时固定定位的盒子与版心一同缩放
在网页设计过程中我们可能会出现这种情况:设置好一个固定定位的盒子,但是当网页缩放时固定定位的盒子与网页的版心分离 这是因为css定位中的固定定位是以页面为参照进行定位的,而不是以版心盒子为参照,那么我 ...
- flex组合流动布局实例---利用css的order属性改变盒子排列顺序
flex弹性盒子 <div class="container"> <div class="box yellow"></div> ...
- windows定位dll的搜索顺序
原文:http://blog.csdn.net/zzxian/article/details/6429293 Visual C++ Windows 用来定位 DLL 的搜索路径 通过隐式和显式链接,W ...
- vue项目中主要文件的加载顺序（index.html、main.js、App.vue）
todo: https://www.cnblogs.com/xifengxiaoma/p/9493544.html https://www.cnblogs.com/stella1024/p/10563 ...
- 前端2 — CSS — 更新完毕
1.CSS是什么? 指:Cascading Style Sheet --- 层叠样式表 CSS 即:美化网页( 在HTML不是说过W3C规定网页为三种标准嘛,结构层HTML已经玩了,而这个CSS就是 ...
- HTML设计模式学习笔记
本周我主要学习了HTML的设计模式,现将我的学习内容总结如下: 一．盒模型的学习 CSS中有一种基础的设计模型叫做盒模型,它定义了元素是如何被看做盒子来解析的.我主要学习了六种盒模型,分别为内联盒模型 ...
- 认识CSS中布局之文档流、浮动、定位以及叠放次序
前端之HTML,CSS(七) CSS CSS布局的核心就是盒子的摆放,即CSS定位.而CSS中定位机制分为:普通流(nomal flow).浮动(float).定位(position). 普通流 普通 ...
随机推荐
- 『Go基础』第5节 第一个Go程序
本节我们来学习写一个最简单的Go程序: 打印 Hello Go. 第一个Go程序, 只要跟着做, 留下个印象就可以. 用Goland创建一个 hello_go.go 文件(后缀为 .go ). 文件内 ...
- git push proxy 取消不掉 can not prox....
使用这个折腾了半天 git config --global --unset http.proxy git config --global --unset https.proxy 没用,原来实现项目目录 ...
- Mongodb 学习笔记(一)
MongoDB 是一款开源.跨平台.分布式,具有大数据处理能力的文档存储数据库.在 2007 年由 MongoDB 软件公司开发完成,并实现全部代码源发展.目 前,该文档数据库被国内外众多知名网因所采 ...
- tp框架防止表单重复提交
转载 框架官方 http://www.thinkphp.cn/topic/9090.html 第三方 https://my.oschina.net/caomenglong/blog/728908
- python3基础之“小练习（2）”
(十三)创建一个你最喜欢歌手的列表. # singer=list() # singer=['a','b','c'] # print(singer) (十四)创建一个由元组构成的列表,每个元组包含居住过 ...
- HTML知识整理
以下是自己对以前所学的部分HTML相关知识进行的简单的梳理,水平有限,若有问题的地方,还请见谅. 1. 常用的浏览器及浏览器内核分别是什么? IE:Trident 内核 Firefox:gecko 内 ...
- JavaScript之条件语句
(1)if条件语句 // if(条件){当条件为真,存在即为真.当条件为false null 0 undefined中任意一种时,则表示不存在,不存在即为假} if(条件){ 条件为真时执行的代码 } ...
- JAVA基础之Servlet
个人理解: servlet是用Java编写的服务器端程序,具有独立于平台和协议的特性,主要功能在于交互式地浏览和生成数据,生成动态Web内容.需要注意的在创建的服务器端的目录和实际上存在差别的,并且访 ...
- 增强学习--TRPO算法
理论部分参考 推导 数学上的分析 代码
- 从汇编语言写到c语言
好了,言归正传,裸机程序没有操作系统的支持,想要用c语言,就只能先使用汇编语言手动配置c语言需要的环境,听起来很高大上,其实需要做的很简单:指定堆栈指针的值就好. 那么完成这个简单的事情之前,先要明白 ...