CSS中的定位总结
2021-01-24 本文已影响0人
周星星的学习笔记
一、定位的组成
1.定位的定义
定位：将盒子定在某一个位置，如同是在摆放盒子，按照定位的方式移动盒子。定位=定位模式+边偏移定位模式：用于指定一个元素在文档中的定位方式。边偏移：决定了该元素的最终位置。
2.定位模式
定位模式决定元素的定位方式，它通过CSS的
position属性来设置，其值可以分为以下四种：
| 值 | 语义 |
|---|---|
| static |
静态定位 |
| relative |
相对定位 |
| absolute |
绝对定位 |
| fixed |
固定定位 |
| sticky |
粘性定位 |
3.边偏移
边偏移就是定位的盒子移动到最终的位置。有
top、bottom、right、left4个属性
| 边偏移属性 | 示例 | 描述 |
|---|---|---|
| top | top:80px |
顶端偏移量，定位元素相对于其父元素上边线的距离
|
| bottom | bottom:80px |
底端偏移量，定位元素相对于其父元素下边线的距离
|
| left | left:80px |
左侧偏移量，定位元素相对于其父元素左边线的距离
|
| right | right:80px |
右侧偏移量，定位元素相对于其父元素右边线的距离
|
二、静态定位（了解）
1.描述
- 静态定位是元素的默认定位方式，是无定位的意思。
- 静态定位按照标准流特性摆放位置，它没有边偏移。
- 静态定位在实际开发过程中很少用到。
2.语法
选择器{ position : static; }
三、相对定位（重要）
1.描述
- 相对定位是指元素在移动位置的时候，是相对于它
原来的位置进行移动的。
2.语法
选择器{ position : relative; }
3.特点
- 它是
相对于自己原来的位置进行移动的（移动的位置是参照自己原来的位置）- 原来在标准流的位置
继续占有，后面的盒子仍然以标准流的方式对待它。（不脱标，继续保留原来的位置）
4.图解
四、绝对定位（重要）
1.描述
- 绝对定位是指元素在移动位置的时候，是相对于它
祖先元素来说的。
2.语法
选择器{ position : absolute; }
3.特点
- 如果没有祖先或者祖先元素没有定位，则以浏览器为准定位（Document文档）
- 如果祖先元素有定位（相对、绝对、固定定位），则以
最近一级的有定位祖先元素为参考点移动位置。- 绝对定位
不再占有原先的位置。（脱标）
4.图解
五、固定定位（重要）
1.描述
- 固定定位是元素固定于浏览器可视区的位置。主要使用场景：可以在浏览器页面滚动时元素的位置不会改变。
2.语法
选择器{ position : fixed; }
3.特点
1.以浏览器可视窗口作为参照点移动元素。
- 跟父元素没有任何关系。
- 不随滚动条滚动
2.固定定位不再占有原来的位置
- 固定定位也是脱标的，其实固定定位可以看做一种特殊的绝对定位。
4.效果
六、粘性定位（了解）
1.描述
*粘性定位可以被认为是相对定位和固定定位的混合。
2.语法
选择器{ position : sticky; top : 10px;}
3.特点
- 以浏览器可视窗口作为参照点移动元素。（固定定位的特点）
- 粘性定位占有原先的位置。（相对定位的特点）
- 必须添加top、left、right、bottom其中一个才有效。
- 跟页面滚动搭配使用，但是
兼容性较差，IE不支持。
4.代码示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>粘性定位</title>
<style>
* {
margin: 0px;
padding: 0px;
}
body {
height: 3000px;
}
.box {
position: sticky;
top: 0px;
width: 800px;
height: 50px;
background-color: pink;
border: 1px solid red;
margin: 100px auto;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
5.效果
