目录
2、首先left 50% 父盒子一半的大小。然后走自己外边距负的一半值就可以了。margin-left=-半值
定位
（1）为什么要定位？
第一幅图：红色的小方块可以在图片上移动。
第二幅图：左右箭头可以切换图片
（3）头部悬浮不动
（2）元素的定位属性
元素的定位属性主要包括定位模式和边偏移两部分
边偏移
边偏移属性 描述 bottom 底部偏移量，定义元素相对于其父元素下边线的距离 top 顶端偏移量，定义元素相对于其父元素上边线的距离 left 左侧偏移量，定义元素相对于其父元素左边线的距离 right 右侧偏移量，定义元素相对于其父元素右边线的距离 定位要与边偏移一起搭配使用，如top: 100px; left:30px;
定位模式
在CSS中，position属性用于定义元素的定位模式，其基本语法如下：
选择器 { position: 属性值; }position属性的常用值
相对定位 占有位置 不脱标
绝对定位 不占有位置 完全脱标
属性值 描述 static 默认值，自动定位。 relative
不完全脱离文档流（不完全脱标）
相对位置，相对于其自己原文档流的位置进行定位，原本所占的空间仍保留，一般用于父元素，不设置偏移量。 默认宽度依旧是父元素的100%
absolute
完全脱离文档流
（完全脱标）
绝对定位，相对于其上一个（最近的一个）已经定位的父元素进行定位，空间不保留 默认宽度不是父元素的100% 一般用于子元素，设置偏移量
fixed
完全脱离文档流
固定定位， 相对于浏览器窗口是固定位置（要写偏移量属性）
相对于body进行定位（不写偏移量属性） 默认状态
注意：当块级元素设置了绝对定位、固定定位，会导致元素隐式转换为inline-block; 此时元素不会再像block宽度表现为父级的100%，而是需要手动设置100%，这与浮动是一样的，其实是当元素完全脱离文档流时，就需要手动设置
（3）静态定位static
静态定位是所有元素的默认定位方式，当position属性的取值为static时，可以将元素定位于静态位置。所谓静态位置就是各个元素在HTML文档流中默认的位置。
在静态定位状态下，无法通过偏移属性（top、bottom、left、right）来改变元素的位置。
一般用来清除定位，比如一个原来有定位的盒子，不写定位了，就可以加static
（4）相对定位relative
设置为相对定位的元素框 会偏移某个距离。元素仍然保持其未定位前的形状，它原本所占的空间仍保留。
如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直或水平位置，让这个元素 在自己原来在文档流中的位置 进行移动。
注意：
1、在使用相对定位时，通过边偏移来移动位置，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它框。
2、相对定位的盒子仍在标准流中，它后面的盒子仍以标准流方式对待他。（相对定位不脱标）
3、如果说浮动的主要目的是让多个块级元素一行显示，那么定位就是移动位置，让盒子到我们想要的位置去。
示例：如果将 top 设置为 20px，那么框将在原位置顶部下面 20 像素的地方。如果 left 设置为 30 像素，那么会在元素左边创建 30 像素的空间，也就是将元素向右移动。
#box_relative { position: relative; left: 30px; top: 20px; }
（5）绝对定位absolute
设置为绝对定位的元素框从文档流完全删除，并相对于其包含块(父元素)定位，包含块可能是文档中的另一个元素或者是初始包含块（body）。元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。
绝对定位使元素的位置与文档流无关，因此不占据空间。 脱标
绝对定位的元素相对于最近一级已经定位的父元素来定位 （相对于定位的父元素来移动）
普通流中其它元素的布局就像绝对定位的元素不存在一样：
#box_relative { position: absolute; left: 30px; top: 20px; }
绝对定位的元素的位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块。
父级没有定位 父亲没有定位,孩子以浏览器为基准点对齐
父级有定位 父亲有定位，则以父亲为基准点对齐
子绝父相 意思是：子级是绝对定位的话，父级要用相对定位。
子绝父相的由来：
相对定位 占有位置 不脱标
绝对定位 不占有位置 完全脱标
（6）绝对定位的盒子水平/垂直居中
文本在盒子中水平居中：text-align：center； （用于inline和inline-block的标签）
单行文本在盒子中垂直居中：line-hight：盒子高度；
盒子（块级，有宽度）在父盒子中水平居中：margin：0 auto；
盒子在父盒子中水平垂直居中：父相子绝
1、通过绝对定位 和 margin：auto来实现
父相子绝 为什么？ 父元素设置定位属性 相对定位 不给父元素设偏移量 不会影响其他元素 绝对定位给会相对最近有定位属性的父级进行定位 绝对定位不要滥用 相对定位不完全脱标 其他元素不会占据他 的空间 相对定位如果不设置偏移量 相当于没有设置定位一样 用父元素掌控子元素距离父元素进行偏移 更好的设置位置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>26-盒子水平垂直居中-定位</title>
<style>
.fa {
width: 500px;
height: 500px;
background-color: purple;
position: relative;
}
.sn {
width: 300px;
height: 300px;
background-color: yellow;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
（如果子元素没有设置高度，那么子元素的高度会被拉伸至父元素的高度）
}
</style>
</head>
<body>
<div class="fa">
<div class="sn"></div>
</div>
</body>
</html>为什么上述能够居中呢？以水平方向为例子，绝对定位的元素:
left +
margin-left +
border-left +
padding-left +
width +
padding-right +
border-right +
margin-right +
right = 包含块
width为定值，padding, border默认为0/none，left、right为0，那么margin-left和margin-right为auto，则平分剩余空间，居中。
理解：如果设置了绝对定位并且上下左右全部为0(不能只设置上左或者其他的任意两方向),那么他会填充整个父元素的所有可用空间,那么auto就有了作用,会平均分配剩余的空间（auto原来只能设置水平居中，而现在绝对定位使当前元素能够设置垂直居中）
拓展：其实是因为绝对定位让当前元素成为了流体特性元素（块状元素像放在容器中的水流一样，内容区域会随着margin padding border的出现填满剩余空间）
定位的盒子也可以水平或垂直居中，算法如下：
2、首先left 50% 父盒子一半的大小。然后走自己外边距负的一半值就可以了。margin-left=-半值
<div class="father">
<div class="son-hr"></div>
<div class="son-ve"></div>
<div class="hr-ve"></div>
</div>
<style type="text/css">
.father {
width: 800px;
height: 400px;
background-color: pink;
margin: 50px auto;
position: relative;
}
/*子元素水平居中*/
.son-hr {
width: 100px;
height: 50px;
background-color: green;
position: absolute;
/*margin: 0 auto; 使用绝对定位的盒子,margin的auto就失效了*/
left: 50%;
margin-left: -50px;
}
/*子元素垂直居中*/
.son-ve {
width: 100px;
height: 50px;
background-color: blueviolet;
position: absolute;
top: 50%;
margin-top: -25px;
}
/*子元素垂直加水平居中*/
.hr-ve {
width: 100px;
height: 50px;
background-color: darkgoldenrod;
position: absolute;
left: 50%;
margin-left: -50px;
top: 50%;
margin-top: -25px;
}
</style>3、定位 和 transform
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>demo</title>
<style type="text/css">
.div1 {
width: 500px;
height: 500px;
background-color: red;
position: relative;
}
.div2 {
height: 200px;
width: 200px;
background-color: blue;
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div class="div1">
<div class="div2">
</div>
</div>
</body>4、padding+margin定位
.fa {
width: 500px;
height: 400px;
background-color: red;
box-sizing: border-box;
padding-top: 1px; /*不写这个的话，无法垂直居中，因为父 子元素之间没有任何东西，会外边距合并，可以用padding-top和box来解决，更多解决方案在盒子模型里 */
}
.son {
width: 300px;
height: 200px;
background-color: blue;
margin: 0 auto;
margin-top: 100px;
}
<div class="fa">
<div class="son"></div>
</div>
（7）固定定位fixed
固定定位是绝对定位的一种特殊形式，它以浏览器窗口作为参照物来定义网页元素。当position属性的取值为fixed时，即可将元素的定位模式设置为固定定位。
当对元素设置固定定位后，它将脱离标准文档流的控制，始终依据浏览器窗口来定义自己的显示位置。不管浏览器滚动条如何滚动，也不管浏览器窗口大小如何变化，该元素都会始终显示在浏览器窗口的固定位置。
设置了top：0；那么相对于浏览器窗口顶部定位 没加这个属性，相对于body标签的原点进行定位的，所以正常情况下 给元素设置固定定位时一定要加偏移量属性
（8）叠放次序（z-index）
当多个元素同时设置定位时，定位元素之间有可能发生重叠。
要想调整重叠定位元素的堆叠顺序，可以对定位元素使用z-index层叠等级属性，其取值可为正整数、负整数、0. 默认为0
注意：
1、数字后面不能加单位。
2、只有相对定位、绝对定位、固定定位有此属性，其余标准流、浮动、静态定位都无此属性。
3、flex盒子的子元素也可以设置z-index属性(后面了解)
-
同级:
1\ 不加z-index 后来者居上
2\ 加z-index 值越大越在上面 如果值相等 还是后来者居上
<img src="./image/banshou.png" alt=""> <p>段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落</p> img { position: absolute; z-index: 99; } p { position: absolute; z-index: 9; } -
嵌套:
1\ 不加z-index 默认子元素在上
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>02-z-index</title> <style> div { width: 200px; height: 200px; } .box1 { width: 400px; height: 300px; background-color: red; } .son { background-color: yellow; } </style> </head> <body> <div class="box1"> <div class="son"></div> </div> </body> </html>2\ 只给子元素加z-index值<0 可实现父元素为上
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>02-z-index</title> <style> div { width: 200px; height: 200px; } .box1 { width: 400px; height: 300px; background-color: red; } .son { background-color: yellow; position: absolute; z-index: -1; } </style> </head> <body> <div class="box1"> <div class="son"></div> </div> </body> </html>3\ 如果给父元素也添加z-index 父元素无论怎样 子元素都将在父元素上
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>02-z-index</title> <style> div { width: 200px; height: 200px; } .box1 { width: 400px; height: 300px; background-color: red; position: absolute; z-index: 9999; } .son { background-color: yellow; position: absolute; z-index: -1; } </style> </head> <body> <div class="box1"> <div class="son"></div> </div> </body> </html> -
嵌套+同层级
1\ 如果父元素有其他兄弟元素 如果两者都没加z-index 后来者居上
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>02-z-index</title> <style> div { width: 200px; height: 200px; } .box1 { width: 400px; height: 300px; background-color: red; } .son1 { background-color: yellow; } .box2 { background-color: black; width: 300px; height: 400px; } </style> </head> <body> <div class="box1"> <div class="son1"></div> </div> <div class="box2"></div> </body> </html>2\ 两者父元素都没加z-index 若某一子元素z-index值大 那么该子元素将显示在上方 如果值相同 则后来者居上
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>02-z-index</title> <style> div { width: 200px; height: 200px; } .box1 { width: 400px; height: 300px; background-color: red; position: relative; } .son1 { background-color: yellow; position: absolute; z-index: 6; } .box2 { background-color: black; width: 300px; height: 400px; position: absolute; top: 0; left: 0; } .son2 { background-color: green; position: absolute; /* z-index: 6; */ z-index: 5; } </style> </head> <body> <div class="box1"> <div class="son1"></div> </div> <div class="box2"> <div class="son2"></div> </div> </body> </html>3\ 如果父级都加了z-index 那么在进行比较时 只比较父元素z-index值 值越大则父元素连同里面的子元素越靠上 如果值相等 后来者居上 拼爹
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>02-z-index</title> <style> div { width: 200px; height: 200px; } .box1 { width: 400px; height: 300px; background-color: red; position: relative; z-index: 3; } .son1 { background-color: yellow; position: absolute; z-index: 6; } .box2 { background-color: black; width: 300px; height: 400px; position: absolute; top: 0; left: 0; z-index: 6; } .son2 { background-color: green; position: absolute; /* z-index: 6; */ z-index: 5; } </style> </head> <body> <div class="box1"> <div class="son1"></div> </div> <div class="box2"> <div class="son2"></div> </div> </body> </html>
（9） 粘性定位（了解）
粘性定位可以被认为是相对定位和固定定位的混合。元素在跨越特定阈值前为相对定位，之后为固定定位。例如：
#one { position: sticky; top: 10px; }
在 viewport 视口滚动到元素 top 距离小于 10px 之前，元素为相对定位。之后，元素将固定在与顶部距离 10px 的位置，直到 viewport 视口回滚到阈值以下。
粘性定位常用于定位字母列表的头部元素。标示 B 部分开始的头部元素在滚动 A 部分时，始终处于 A 的下方。而在开始滚动 B 部分时，B 的头部会固定在屏幕顶部，直到所有 B 的项均完成滚动后，才被 C 的头部替代。
须指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。
特性（坑）：
sticky不会触发BFC
z-index无效，
当父元素的height：100%时，页面滑动到一定高度之后sticky属性会失效。
父元素不能有overflow:hidden或者overflow:auto属性。
父元素高度不能低于sticky高度
必须指定top、bottom、left、right4个值之一，否则只会处于相对定位
sticky元素仅在其父元素内生效
8563
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
