只有定位才用z-index设置层级关系
相对定位：
1，他是相对于自身原来位置移动
2.原来的在标准留的位置继续占有，后边盒子仍以标准流对待他
所以并没有脱标（主要用限制绝对定位）
**绝对定位：**相对祖先元素移动
1.如果没有祖先元素或所有祖先元素没有定位，相对Document文档移动
2.如果祖先元素有定位（绝对相对固定），以最近一级有定位的祖先元素移动
3.绝对定位不再占有移动前的位置脱标即能在相对定位祖先元素内自由移动，否则不脱标老占有移动前的标准流位置就会影响相对定位祖先元素的位置，
固定定位
1.以浏览器可视窗口
2.与父元素无关
3.不随滚动条滚动
4.不占有原来位置脱标
固定定位是特殊的绝对定位
固定在版心右侧：
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.w {
width: 800px;
height: 1400px;
background-color: pink;
margin: 0 auto;
}
.fixed {
/* fix盒子总是保持在浏览器可视区版心右侧且相对可视区垂直居中处 */
position: fixed;
left: 50%;
margin-left: 400px;
/* margin-left=w.width/2 */
top: 50%;
margin-top: -75px;
/* margin-top=fixed.height/2 */
width: 50px;
height: 150px;
background-color: skyblue;
}
</style>
</head>
粘性定位：（ie完全不支持）
1.以浏览器可视窗口移动（固定定位即一种特殊的绝对定位）
2.站由原来的位置不脱标（相对定位）
3.必须添加top bottom left right中一个才有效
z-index
数值可以是正整数、负整数或 0, 默认是 auto，数值越大，盒子越靠上
如果属性值相同，则按照书写顺序，后来居上
数字后面不能加单位
只有定位的盒子才有 z-index 属性
代码实现固定绝对定位盒子相对于可视区水平垂直居中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.w {
width: 800px;
height: 1400px;
background-color: pink;
margin: 0 auto;
}
.fixed {
/* fix盒子总是保持相对可视区水平垂直居中（固定定位同理） */
position: fixed;
/* left: 50%;
margin-left: 400px; */
/* margin-left=w.width/2 */
top: 50%;
margin-top: -75px;
/* margin-top=fixed.height/2 */
left: 50%;
margin-left: -25px;
/* margin-left: -fixed.width/2; */
width: 50px;
height: 150px;
background-color: skyblue;
}
</style>
</head>
<body>
<div class="fixed"></div>
<div class="w"></div>
</body>
</html>
定位特殊特性：
绝对固定定位和浮动类似（变为行内块元素）：
行内元素加绝对固定定位之后可直接设置宽高，高度由不带行高的内容撑开变为带行高的内容撑开
块级元素添加绝对和固定定位，如不给定宽高，默认大小是内容大小
浮动绝对定位固定定位元素脱标都不会引起外边距合并导致的高度塌陷
浮动元素不会压住以后标准流盒子的文字，定位会
固定定位左右边缘有两个宽度不变的固定定位儿子，中间一个宽度变化相对定位儿子有一个绝对定位的儿子示例代码（选自
黑马程序员pink老师前端入门视频教程 HTML5+CSS3+移动端布局-flex布局rem布局响应式布局摹客蓝湖使用-简单有趣好玩 p407）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no,min-scale=1.0,max-scale=1.0">
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
/* 此案例基于移动端开发，父元素宽度默认是移动端设备宽度 */
width: 100%;
/* 以下需再次给定宽度范围的是脱标的（固定绝对）因为固定定位相对浏览器可视区，绝对相对于dom文档，因为不脱标的宽度会自动被同为标准流的body限制 */
min-width: 500px;
max-width: 640px;
margin: 0 auto;
height: 2000px;
}
.box1 {
position: fixed;
/* body默认宽度是在给定范围的某个移动端设备宽度,box1默认宽度是父元素body默认宽度，但注意box1只继承了body.width:100%;并没有继承body的min-width、max-width,所以继续检索body的父元素dom宽度pc端dom宽度默认1349px，所以脱离标准流的box1默认宽度是pc端dom宽度1349px（换一种理解固定相对于浏览器可视区，默认宽度是浏览器可视区宽度，如box1绝对定位，默认宽度是最近一级带定位祖先元素宽度，此案例box1最近一级带定位祖先是dom，所以如box1是绝对定位默认宽度是dom宽度）
对比：对于body的标准流儿子，可理解为直接继承了来自body.width的像素值
对于body脱标（固定定位绝对定位浮动）儿子可理解为继承了来自body.width的百分比值从而追溯到dom，dom.width:1349px;所以为了让body脱标儿子宽度也在body给定范围内，所以只能给body脱标儿子重新添加min-width max-width*/
width: 100%;
min-width: 500px;
max-width: 640px;
/* 当没给定高度，儿子元素leftbox、rightbox绝对定位会脱离掉已经固定定位的爸爸box1类似于绝对定位脱离标准流，middlebox绝对定位时，也会脱离固定定位的box1（box1固定定位即特殊绝对定位先脱离标准流父盒子body,然后middlebox再在已经脱离标准流的box1基础上再脱离box1，由于box1三个儿子都绝对定位脱离掉box1，所以box1.height依然为0）
情况二：当middlebox相对定位，不会脱离已经脱离掉标准流的父盒子box1，所以相当于高度为零的标准流块元素高度能由不脱标（不浮动不绝对定位不固定定位）子元素高度撑开 */
/* height: 40px; */
border: 2px solid yellow;
}
.leftbox,
.rightbox {
position: absolute;
top: 0;
width: 40px;
height: 40px;
}
.leftbox {
background-color: pink;
left: 0;
}
.rightbox {
background-color: #ccc;
right: 0;
}
.middlebox {
/* width: 100%; */
/* 如果middlebox绝对定位，则必须加上min-width、max-width，因为body默认宽度是移动端设备宽度的100%(此处是 width: 100%;（pc端dom宽度） min-width: 500px;max-width: 640px;（移动端设备宽度合集）叠加效果)，所以body儿子box1默认宽度（因box1标准流从body继承来的是宽度像素值）是body的默认宽度即在body给定范围内某个设备的宽度，又box1儿子middlebox处有margin-left、margin-right所以middlebox默认宽度是box1默认宽度即给定范围内的某个设备宽度减掉box1.margin-left、 box1.margin-right(一般给定了margin-left margin-top默认宽度不再指定100%,原因在middle.margin处的写的注释)， */
/* width: 100%; */
position: absolute;
min-width: 500px;
max-width: 640px;
/* 以下用relative可看做块元素，当没有指定宽度时默认宽度是父元素宽度 */
/* position: relative; */
height: 40px;
background-color: skyblue;
/* 没有给定宽度默认是.box1宽度又因为给左右margin（致使默认宽度不再是父元素box1宽度），所以middlebox默认宽度是.box里左右各减去middlebox左右margin 此时如何再加上width:100%;则middlebox宽度为box1宽度此时出现box1宽度只能容纳middlebox.margin-left+(middlebox.width-middlebox.margin-left)两部分,box1宽度不够middlebox.width的middlebox.margin-left宽度的最后部分就会伸出到box1盒子右边外部middlebox.margin-right也会在box1盒子右边外部如middlebox后边有行内元素或者行内块元素则后边的元素会换行掉落设置box1.overflow:hidden就能看到这些超出box1宽高范围的儿子元素;*/
margin: 0 50px;
}
.middlechild {
position: absolute;
top: 0px;
left: 0px;
width: 15px;
height: 15px;
background-color: yellowgreen;
}
.header {
/* 包括滚轮dom w=660px时恰好水平方向出现滚轮 w=517恰好body侵占竖直方向滚轮宽度暗含右侧竖直方向滚轮宽度是17px(标尺量的也是)，之后浏览器dom再宽度缩小，body区宽度会逐渐侵占dom竖直方向右侧滚轮区直到把滚轮宽度的17px完全侵占body区和dom区宽度都变成500px之后dom不能再缩小宽度*/
width: 100%;
/* min-width: 500px;
max-width: 640px; */
/* 并且这个margin-left会视觉上错开header和box1 使得header水平偏右一点*/
margin: 0 50px;
height: 40px;
border: 1px solid green;
}
</style>
</head>
<body>
<div class="header">
</div>
<div class="box1">
<div class="leftbox"></div>
<div class="middlebox">
<div class="middlechild">
</div>
</div>
<div class="rightbox"></div>
</div>
<script>
var header = document.querySelector('.header');
window.addEventListener('resize', function() {
console.log(header.offsetWidth);
});
</script>
</body>
</html>
1119
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
