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来定位，其边界根据偏移属性放置。元素定位后⽣成⼀个块级框，⽽不论原来它在正常流中⽣成何种类型的框。定位元素不会流⼊其他元素的内容，反之亦然
css固定定位
因为绝对定位与⽂档流⽆关，所以绝对定位的元素可以覆盖页⾯上的其他元素，可以通过 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 {
/*display: inline-block;*/
position: absolute;
background-color: lightblue;
}
居中⾏内元素
overflow
当overflow在绝对定位元素和其包含块之间时，绝对定位元素不会被⽗级overflow属性剪裁
⽐如：可以应⽤绝对定位元素的overflow属性失效实现按钮外置的效果
.
box {
/*position: relative;*/
width: 200px;
height: 200px;
margin: 30px;
overflow: hidden;
background-color: pink;
}
.close {
position: absolute;
margin: -30px 0 0 185px;
width: 20px;
line-height: 20px;
text-align: center;
border: 2px solid;
border-radius: 50%;
cursor: pointer;
}
测试内容
×
绝对定位的应⽤
⾃适应位置的跟随图标
图标使⽤不依赖定位⽗级的absolute和margin属性进⾏定位，这样，当⽂本的字符个数改变时，图标的位置可以⾃适应
div {
width: 500px;
height: 20px;
margin: 30px;
line-height: 20px;
}
i {
position: absolute;
width: 28px;
height: 11px;
margin: -6px 0 0 2px;
}
改变⽂字长度不影响
视频图⽚上的⼩图标提⽰
⼀般在视频图⽚上的边⾓上都会有“⾃制”、“最新”、“1080p”等诸如此类的提⽰。使⽤不依赖的绝对定位属性，可以让⽗级元素不设置relative，拓展性更强
i {
position: absolute;
width: 50px;
height: 18px;
padding: 2px;
text-align: center;
line-height: 18px;
font-style: normal;
color: white;
background-color: orange;
}
.box {
height: 200px;
width: 200px;
margin: 50px;
border: 2px solid gray;
}
.
in {
display: inline-block;

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。