详解css中的z-index（一）

z-index

        在我们常用的css中z-index 属性是设置节点的堆叠顺序, 这是我们对 z-index 属性普遍的认识. 与此同时, 我们总是对堆叠顺序的概念模糊不清，这样将会导致我们在平时的布局中出现一些问题。下面我个人对css中z-index的一些个人的认识，希望能帮到大家，有说错的地方希望大家指正。  

        css布局中我们常常会使用一些float:laft;和float:right;以及定位中的absolute,relative,fixed;

有的人误认为定位和定位之间是本身就存在附带堆叠顺序的,在自己经过测试之后发现,他们的默认是没有堆叠顺序的,只是在html中标签的前后顺序导致的而使大家误认为是定位和定位之间的堆叠顺序而导致的。

 下面是正常使用z-index代码示例：

立即学习“前端免费学习笔记（深入）”；

  定位中的static是标准流，所以这里不做讲解

 当我们有三个盒子

div { width: 100px; height: 100px; color: white; float: left; }.div1 { position: fixed; background-color: red; }.div2 { background-color: blue; position: relative; }.div3 { background-color: green; position: absolute; } head>
div1
div2
div3

登录后复制

以上就是详解css中的z-index（一）的详细内容，更多请关注【创想鸟】其它相关文章！