css怎么设置z坐标,CSS 定位（postion、z-index）
CSS 定位
CSS有三种基本的定位机制：普通流，浮动，绝对定位(absolute, fixed)：
普通流是默认定位方式，在普通流中元素框的位置由元素在html中的位置决定，这也是我们最常见的方式，其中 position: static 与 position: relative 属于普通流的定位方式
浮动定位机制
绝对定位包括 absolute和 fixed
position: static(默认) | relative | absolute | fixed | sticky | inherit
// 应用于所有元素。无继承性
/*
static：
元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。
元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)
relative：
生成相对定位的元素，相对于元素本身正常位置进行定位。
元素仍保持其未定位前的形状，它原本所占的空间仍保留。
常用于对其自身进行细微调整。
相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置
absolute：
生成绝对定位的元素，元素框从文档流完全删除，相对于 static 定位以外的第一个祖先元素(offset parent)进行定位。
元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框
fixed：
元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身(或者说是浏览器窗口)
常用于需要一直停留在窗口的元素
sticky：
CSS3新属性，兼容性较差，一般用JS实现。表现类似 position: relative 和 position: fixed 的合体，
在目标区域在屏幕中可见时，它的行为就像 position: relative;
而当页面滚动超出目标区域时，它的表现就像 position: fixed，它会固定在目标位置
inherit：规定应该从父元素继承 position 属性的值。一般不使用
*/
// 三种定位机制使用了4个属性来描述定位元素各边相对于其包含块的偏移。这4个属性被称为偏移属性
top/right/bottom/left = | | auto(默认) | inherit
/*
应用于：定位元素(也就是 position 值不是 static 的元素)。无继承性
百分数：对于top和bottom，相对于包含块的 clientHeight；对于right和left，相对于包含块的 clientWidth
这些属性描述了距离包含块最近边的偏移。top描述了定位元素上外边界离其包含块的顶端有多远。如果top为正值，会把定位元素的上外边距边界下移，若为负值，则会把定位元素的上外边距移到其包含块的顶端之上。
类似地，left描述了定位元素的左外边距边界在其包含块左边界右边(正值)或左边(负值)有多远。如果是正值，会把定位元素的外边距边界移到包含块左边界右边，而负值则将其移到包含块左边界左边。
所以，正值会导致向内偏移，使边界朝着包含块的中心移动，而负值会导致向外偏移
偏移定位元素的外边距边界时，带来的影响是元素的所有一切(包含外边距、边框、内边距和内容)都会在定位的过程中移动
注意：
定位元素的边界是指定位元素 margin 外侧的边界；包含块的包含区域是指包含块的 border 内侧的 padding + content 区域
如果同时定义了 left 和 right 值，且 width 和 height 有值，那么 left 生效， right 无效，同样，同时定义了 top 和 bottom，top 生效。
*/
绝对定位(absolute)
定义
相对定位可以看作特殊的普通流定位，元素位置是相对于它在普通流中位置发生变化，而绝对定位使元素的位置与文档流无关，也不占据文档流空间，普通流中的元素布局就像绝对定位元素不存在一样
当元素绝对定位时，会从文档流中完全删除。绝对定位的元素的位置是相对于距离最近的非static祖先元素位置决定的。如果元素没有已定位的祖先元素，那么他的位置就相对于初始包含块html来定位，其边界根据偏移属性放置。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。定位元素不会流入其他元素的内容，反之亦然
因为绝对定位与文档流无关，所以绝对定位的元素可以覆盖页面上的其他元素，可以通过 z-index 属性控制叠放顺序，z-index 越高，元素位置越靠上
注意：如果文档可滚动，绝对定位元素会随着它滚动，因为元素最终会相对于正常流的某一部分定位
宽度
绝对定位宽度是收缩的，如果想撑满父容器，可以设置 width: 100%
注意：当父容器里有 绝对定位 的子元素时，子元素设置 width: 100% 实际上指的是相对于父容器的 padding+content 的宽度。当子元素是非绝对定位的元素时，width: 100% 才是指子元素的 content 等于父元素的 content宽度
特性
absolute 和 float都可以触发元素的BFC属性，且都具有包裹性和破坏性，所以对于一些应用场景，这两个属性可以进行替换
包裹性
元素绝对定位后，会为其后代元素建立一个包含块。且若该绝对定位元素不设置宽度，宽度由内容撑开，也就是默认宽度为内容宽度
注意：浮动的包含块会延伸，进而包含所有后代浮动元素，但绝对定位的包含块并不会包含后代的定位元素，只是作为后代定位元素的定位父级
破坏性
元素绝对定位后，会脱离文档流，若父级不设置高度，则父级高度塌陷；若父级为行内元素，无其他内容，则父级宽度也将塌陷
去浮动
元素绝对定位后，元素原来的浮动效果将失效
偏移特性
如果使用top、right、bottom、left这4个偏移特性来描述元素4个边的放置位置，那么元素的高度和宽度将由这些偏移隐含确定，元素将会拉伸
使用偏移属性拉伸的绝对定位元素，其内部元素支持百分比 width/height 值。通常情况下，元素高度百分比要想起作用，需要父级窗口的高度值不是 auto；但是如果容器由绝对定位拉伸形成，百分比高度值也是支持的
display 解析
当元素绝对定位后，元素可以改变display属性，但各浏览器解析不一致
IE8+浏览器解析正常
firefox和safari浏览器只有切换为display: none;时才会重新渲染，其他值相互切换时无效
chrome浏览器切换到display: inline;时渲染无效，其他值相互切换时渲染正常
IE7-浏览器将绝对定位的元素全部渲染为inline-block元素，只有切换为display: none;时才会重新渲染，其他值相互切换时无效
解决IE7-浏览器绝对定位元素渲染为inline-block元素的bug很简单，只需要在绝对定位的元素外面套一个空的
clip
绝对定位或固定定位元素才可以使用clip属性。绝对定位元素常配合clip属性达到元素隐藏的效果
.hide{
position: absolute;
clip: rect(0, 0, 0, 0);
}
静态位置
当元素绝对定位后，若该元素的格式化属性不发生变化，则该元素处于静态位置
元素的静态位置是指元素在正常流中原本的位置，更确切的讲，顶端的静态位置是从包含块的上边界到假想框的上外边距边界之间的距离。假想框是假设元素position 属性 为static 时元素的第一个框
但对于居中对齐的行内元素(个人：还包括行内块状元素)来说，将元素设置为 absolute 或 fixed 会发生静态位置跳动问题。而 relative 或 static 则不会有此问题。这是因为元素默认的居中对齐是元素的内容中线对应父级块级元素中线，而当元素绝对定位或固定定位之后，定位元素左边界将与其父级块级元素的中线对齐。除了居中对齐，左对齐、右对齐都是利用元素自身的左边界去对齐
* {
padding: 0;
margin: 0;
}
.box1 {
width: 300px;
height: 200px;
margin: 20px;
text-align: center;
/*text-align: right;*/
background-color: lightsalmon;
}
span {