本文详细介绍了CSS中的定位概念，包括静态定位、相对定位、绝对定位和固定定位。绝对定位会根据最近已定位的父元素进行定位，而固定定位则始终以浏览器窗口为基准。此外，文章还探讨了子绝父相的原则、绝对定位盒子的居中方法以及叠放次序（z-index）的使用。定位在CSS中至关重要，尤其是在创建交互式效果时。
定位（position）
如果说浮动关键在一个“浮”字上面，那么我们的定位，关键在于一个”位“上
ps：定位是我们css算是数一数二的难点了，但是，需要务必学好，css离不开定位，特别是后面的is特效，天天和定位打交道。
定在某一个位置简称定位
元素的定位属性
元素的定位属性主要包括定位模式和边偏移两部分。
1.边偏移
| 边偏移属性 | 描述 |
|---|---|
| top | 顶端偏移量，定义元素相对于其父元素上边线的距离 |
| bottom | 底部偏移量，定义元素相对于其父元素下边线的距离 |
| left | 左侧偏移量，定义元素相对于其父元素左边线的距离 |
| right | 右侧偏移量，定义元素相对于其父元素右边线的距离 |
2.定位模式 （定位的分类）
在css中，position属性用于定义元素的定位模式，其基本语法格式如下：
选择器{position:属性;}
position属性值的常用值
| 值 | 描述 |
|---|---|
| static | 自动定位（默认定位方式） |
| relative | 相对定位，相对于其原文档流的位置进行定位 |
| absolute | 绝对定位，相对于其上一个已经定位的父元素进行定位 |
| fixed | 固定定位，相对于浏览器窗口进行定位 |
div {
width: 100px;
height: 100px;
background-color: skyblue;
top: 100px; /*边偏移*/
left: 100px;
/*如果让盒子往左走了就不要在给right值了 给了top就不要给bottom了 */
position: absolute; /*定位模式 （绝对定位）*/ /*边便宜+定位模式=定位 有了定位 变偏移 跟着其一块运行*/
}
静态定位 static （还原型）
静态定位是所有元素的默认定位方式，当position属性的取值为static时，可以将元素定位于静态位置，
所有静态位置就是各个元素在HTML文档流中默认的位置。
（网页中所有元素都默认的是静态定位，其实就是标准流的特性）
在静态定位状态下，无法通过边偏移属性（top、bottom、left或right）来改变元素的位置。
div {
width: 100px;
height: 100px;
background-color: skyblue;
top: 100px; /*边偏移*/
left: 100px;
/*如果让盒子往左走了就不要在给right值了 给了top就不要给bottom了 */
position: static; /*定位模式 --静态定位*/ /*边便宜+定位模式=定位 有了定位 变偏移 跟着其一块运行*/
/*静态定位 -- 静态定位对于边偏移无效 */
/*一般它用来 清除定位的 一个原来有定位的盒子不想加定位了 就写这句话*/
}
相对定位relative（自恋型）
相对定位是将元素相对于它在标准流中的位置进行定位，当position属性的取值为relative时，可以将元素定位于相对位置。
对元素设置相对定位后，可以通过边偏移属性改变元素位置，但是它在文档流中的位置仍然保留
注意：
1.相对定位最重要的一点是，它可以通过边偏移移动位置，但是原来所占的位置， 继续占有；
2.其次，每次移动的位置，是以自己的左上角为基点移动 （相对于自己来移动位置）
就是说，相对定位的盒子仍在标准流中，它后面的盒子仍以标准流方式对待他 。（浮动脱离标准流不占位置）（相对定位不脱标）
如果浮动的主要目的是 让多个快级元素一行显示，那么定位的主要价值是 移动位置，让盒子到我们想要的位置上去。
绝对定位absolute（拼爹型）
注意：如果文档可滚动，绝对定位元素会随着它滚动，因为元素最终会相对于正常流的某一部分定位。
当position属性的取值为absolute时，可以将元素的定位模式设置为绝对定位。
注意;;绝对定位最重要的一点是，它可以通过边偏移移动位置，但是它完全脱标，完全不占位置
例：
div:first-child {
width: 100px;
height: 100px;
background-color: skyblue;
position: absolute; /*定位模式 绝对定位*/
top: 20px;
left: 20px;
/*绝对定位是完全脱标的，它不占有位置*/
}
div:last-child {
width: 200px;
height: 150px;
background-color: purple;
}
绝对定位是完全脱标的，它不占有位置
父亲没有定位
若所有父元素都没有定位，以浏览器为准对齐（document文档）。
父亲有定位
绝对定位是将元素依据最近已经定位（绝对、固定或相对定位）的父元素（祖先）进行定位。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.father {
width: 300px;
height: 300px;
background-color: skyblue;
margin: 100px;
position: relative;
/*父级有定位 则以父亲为基准点对齐 还可以是absolute 无论相对或绝对定位只要父亲有定位即可*/
}
.son {
width: 100px;
height: 100px;
background-color: black;
position: absolute;
top: 15px;
left: 15px; /* 绝对定位 若所有父元素都没有定位，以浏览器为基准点对齐（document文档）。*/
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
</html>
子绝父相
子绝父相，是学习定位的口诀,很重要！
意思： 子级是绝对定位的话，父级要用相对定位
绝对定位是将元素依据最近的已经定位绝对、固定或相对定位的父元素（祖先）进行定位
就是说，子级是绝对定位，父亲只要是定位即可（不管父亲是绝对定位还是相对定位，甚至是固定定位都可以），就是说子绝父绝，子绝父相都是正确的。
网页布局的时候子绝父相用的最多。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
div {
width: 310px;
height: 190px;
border: 1px solid #ccc;
margin: 50px auto;
padding: 10px; /* padding能撑开盒子所以给个padding值可在图片外形成边框 图片压不住padding值*/
position: relative; /*根据子绝父相最合适*/
}
.top {
position: absolute; /*绝对定位*/
top: 0;
left: 0; /*孩子加了绝对定位，如果父级没有定位，以浏览器为基准*/
}
.one {
position: absolute;
right: 0;
bottom: 0;
}
</style>
</head>
<body>
<div>
<img src="1.png" alt="" class="top">
<img src="1.jpg" alt="" >
<img src="2.jpg" alt="" class="one">
</div>
</body>
</html>
绝对定位的盒子水平/垂直居中
普通的盒子是左右margin改为auto就可，但是对于绝对定位就无效了
定位的盒子也可以水平或者垂直居中，有一种算法：
1.首先left 50%； (父盒子的一半大小)
2.然后走自己外边框 负 的一半值即可。 margin-left
例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.father {
width: 800px;
height: 400px;
background-color: blue;
margin: 30px auto;
position: relative;
}
.son {
width: 100px;
height: 40px;
background-color: #ccc;
position: absolute;
/*left: 400px*/
left: 50%;
margin-left: -50px; /* 左走自己宽度的一半 一定要是负值*/
top: 50%;
margin-top: -20px;
/*margin: 0 auto; 加了绝对定位的盒子，margin 左右auto 就无效了*/
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
</html>
固定定位fixed（认死理型）
固定定位是绝对定位的一种特殊形式，类似于正方形是一个特殊的矩形，它以浏览器窗口作为参照物来定义网页元素。当position属性的取值为fixed时，即可将元素的定位模式设置为固定定位。
当对元素设置固定定位后，它将脱离标准文档流的控制，始终依据浏览器窗口来定义自己的显示位置，不管浏览器滚动条如何滚动也不管浏览器窗口的大小如何变化，该元素都会始终显示在浏览器窗口的固定位置。
固定定位有两点：
1.固定定位的元素跟父亲没有任何关系，只认浏览器。
2.固定定位完全脱标，不占有位置，不随着滚动条滚动。
像孙猴子
ie6等低版本浏览器不支持固定定位。
叠放次序（z-index）
当对多个元素同时设置定位时，定位元素中间有可能会发生重叠
在css中，如果想要调整重叠定位元素 的堆叠顺序，可以对定位元素应用z-index层叠等级属性，其取值可为正整数、负整数和0。
比如 ：z-index:2;
注意：
1.z-index的默认属性值是0，取值越大，定位元素在层叠元素中越居大；
2.如果取值相同，则根据书写顺序，后来居上。
3.后面数字一定不能加单位。
4.只有相对定位，绝对定位，固定定位有此属性，其余标准流，浮动，静态定位都无此属性，亦不可指定此属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
div {
width: 200px;
height: 200px;
background-color:skyblue;
position: absolute; /*绝对定位*/
top: 0;
left: 0;
}
div:first-child {
z-index: 1; /* font-weight: 700 无单位*/
}
div:nth-child(2) {
background-color: purple;
top: 30px;
left: 30px;
z-index: 2;
}
div:last-child {
background-color: pink;
top: 60px;
left: 60px;
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
</body>
</html>
四种定位总结
| 定位模式 | 是否脱标占有位置 | 是否可以使用边偏移 | 移动位置基准 |
| 静态static | 不脱标，正常模式 | 不可以 | 正常模式 |
| 绝对定位relativ | 不脱标，占有位置 | 可以 | 相对自身位置移动(自恋型) |
| 绝对定位absolute | 完全脱标，不占有位置 | 可以 | 相对用于定位父级移动位置（拼爹型） |
| 固定定位fixed | 完全脱标，不占有位置 | 可以 | 相对于浏览器移动位置（认死理型） |
定位模式的转换
跟浮动一样，元素添加了 绝对定位和固定定位之后，元素模式也会发生转换，都转换为 行内块模式
因此 比如 行内元素添加了 绝对定位或固定定位或浮动后， 可以不用转换模式，直接给高度和宽度就可以了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="">
div {
height: 100px;
background-color: skyblue;
/*float: left; */
/* 前提没给盒子宽度 浮动的盒子有模式转换的问题 ！！！！ 转换为 行内快 宽度为内容的宽度 */
/*position: absolute;
position: fixed;*/
/*其中relative不能转换 因为它不脱标 */
}
span {
background-color: purple;
/*display: block;*/
width: 100px;
height: 100px;
/*float: left; 如果盒子本身就需要添加浮动或者绝对固定定位就不需要转换了！！ （转换display：block） */
position: absolute; /*有了它也不需要了*/
}
</style>
</head>
<body>
<div>这是定位</div>
<span>我是行内快元素</span>
</body>
</html>
扫一扫
318
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
