CSS学习笔记 | 定位
定位
本文内容：
定位：
1. 为什么需要定位？
2. 定位组成
2.1 定位模式
2.2 边偏移
3. 静态定位（了解）
4. 相对定位
4.1 语法
4.2 相对定位的特点
5. 绝对定位
5.1 语法
5.2 绝对定位的特点
6. 相对定位和绝对定位如何应用 “子绝父相”
7. 固定定位
7.1 语法
7.2 固定定位的特点
7.3 小技巧—固定到版心右侧
8. 粘性定位（了解）
9. 定位总结
10. 定位的叠放顺序
11. 绝对定位的盒子居中算法
12. 定位特殊特性
13. 元素的显示与隐藏
13.1 display属性
13.2 visibility属性
13.3 overflow属性
1、为什么需要定位
试想以下这一种效果：当滚动页面时，某个盒子总是固定在页面中的同一个位置。
用标准流和浮动都无法实现这样的效果。
所以，定位就出现了，它可以让盒子在某个盒子内移动位置或者固定在屏幕中某个位置，并且可以压住其他盒子。
2、定位组成
定位 = 定位模式 + 边偏移
定位模式用于指定一个元素在文档中的定位方式，边偏移则决定了该元素的最终位置
2.1 定位模式
它决定元素的定位方式，通过CSS的position属性来设置
| 值 | 语义 |
|---|---|
static |
静态定位 |
relative |
相对定位 |
absolute |
绝对定位 |
fixed |
固定定位 |
2.2 边偏移
| 属性 | 实例 | 描述 |
|---|---|---|
top |
top: 80px; |
顶端偏移量，定义元素相对于其父元素上边线的距离 |
bottom |
bottom: 80px; |
底部偏移量，定义元素相对于其父元素下边线的距离 |
left |
left: 80px; |
左侧偏移量，定义元素相对于其父元素左边线的距离 |
right |
right: 80px; |
右侧偏移量，定义元素相对于其父元素右边线的距离 |
3、静态定位 （了解）
静态定位是元素的默认定位方式，代表无定位
语法：
选择器 {
position: static;
}
静态定位按照标准流特性摆放位置，没有边偏移，在布局中很少用到。
4、相对定位
顾名思义，元素在移动的时候，是相对于它原来的位置来说的。
4.1 语法
选择器 {
position: relative;
}
4.2 相对定位的特点：
-
它是相对于自己原来的位置来移动的
-
原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待它，因此它最典型的应用是用来限制绝对定位。
是否占有原位置，可以运行以下代码观察：
<style> .box1, .box2 { height: 200px; width: 200px; background-color: blue; } .box2 { background: red; } .box1 { position: relative; left: 100px; top: 100px; } style> <body> <div class="box1">number1div> <div class="box2">nubmer2div> body>
5、绝对定位
绝对定位是指，元素在移动的时候，是相对于它祖先元素来说的
5.1 语法
选择器 {
position: absolute;
}
5.2 绝对定位的特点
-
如果没有祖先元素，或者祖先元素没有定位，则以浏览器为基准定位
<style> .father { position: relative; /* 试试加与不加这句话的区别就可以理解了 */ width: 600px; height: 600px; background-color: pink; } .son { position: absolute; left: 50px; bottom: 50px; width: 300px; height: 300px; background-color: skyblue; } style> head> <body> <div class="father"> <div class="son">div> div> body> -
如果祖先元素有定位（相对、绝对、固定定位），则以最近一级的有定位祖先元素为参考点移动位置。
-
绝对定位不再占有原来的位置
可以利用下面的例子查看效果
<style> .box1 { position: absolute; left: 100px; top: 100px; width: 500px; height: 200px; background-color: skyblue; } .box2 { width: 200px; height: 200px; background-color: pink; } style> head> <body> <div class="box1">div> <div class="box2">div> body>
6、相对定位和绝对定位如何应用 " 子绝父相 "
子绝父相 的意思是：子级是绝对定位的话，父级要用相对定位。
- 子级使用绝对定位，不会占有位置，可以放到父级盒子的任意一个地方，不会影响其他的兄弟盒子。
- 父盒子需要加相对定位来限制子盒子在父盒子中的显示。
- 父盒子布局时，需要占有位置，因此父级盒子只能是相对定位。
总结：由于父级盒子需要占有位置，因此是相对定位；子盒子不需要占有位置，因此是绝对定位。
当然，“子绝父相” 也不是绝对的，只是用的最多。
7、固定定位
固定定位是元素固定于浏览器可视区的位置
主要使用场景：可以在浏览器页面滚动时元素的位置不会改变。
7.1 语法
选择器 {
position: fixed;
}
7.2 固定定位的特点
-
以浏览器的可视窗口为参照点移动元素，跟父元素没有任何关系，不随滚动条滚动
-
固定定位
不占有原先的位置，因此固定定位也可以看作是一种特殊的绝对定位。
7.3 小技巧—固定到版心右侧
利用一个小算法：
- 首先让固定定位的盒子
left: 50%，让盒子走到浏览器可视区的一半位置 - 然后设置固定定位的盒子
margin-left: 一半版心宽度的值，让盒子再往右边移动半个版心的距离，那么就刚好贴在了版心的右侧
可以实验下：
<style>
.box1 {
position: fixed;
/* 分别注释下面两句话来查看效果 */
left: 50%;
margin-left: 400px;
width: 60px;
height: 100px;
background-color: skyblue;
}
.box2 {
width: 800px;
height: 1000px;
background-color: pink;
margin: 50px auto;
}
style>
head>
<body>
<div class="box1">div>
<div class="box2">版心盒子div>
body>
8、粘性定位（了解）
粘性定位可以看作是相对定位和固定定位的结合
语法：
选择器 {
position: sticky;
top: 10px; /* 代表距离顶部还有10px时会固定不动 */
}
粘性定位的特点：
- 以浏览器的可视窗口为参照点移动元素（固定定位特点）
- 粘性定位占有原先的位置（相对定位特点）
- 必需添加 top、left、right、bottom 其中一个才有效
- 跟滚动页面搭配使用
但是兼容性较差，IE不支持，实际应用很少。
举个例子：（可滚动查看效果）
<style>
body {
height: 1000px;
}
.nav {
position: sticky;
/* 表示当距离顶部0px时就会变成固定定位的效果 */
top: 0px;
width: 500px;
height: 50px;
margin: 50px auto;
background-color: skyblue;
}
style>
head>
<body>
<div class="nav">我是导航栏div>
body>
9、定位总结
| 定位模式 | 是否脱离标准流 | 移动位置 | 是否常用 |
|---|---|---|---|
static静态定位 |
否 | 不能使用边偏移 | 很少 |
relative相对定位 |
否（占有原来的位置） | 相对于自身位置移动 | 常用 |
absolute绝对定位 |
是（不占有原来的位置） | 相对于带有定位的父级 | 常用 |
fixed固定定位 |
是（不占有原来的位置） | 相对于浏览器可视区 | 常用 |
sticky粘性定位 |
否（占有位置） | 相对于浏览器可视区 | 当阶段很少 |
注意：
- 一定要记住相对定位、绝对定位、固定定位他们的两个大特点：是否占有位置，以谁为基准点移动
- 重点理解并学会 “子绝父相”
10、定位的叠放顺序
在使用定位进行布局时，可能会出现盒子重叠的情况。此时，可以使用z-index来控制盒子的前后次序
语法：
选择器 {
z-index: 1;
}
<style>
.box1,
.box2,
.box3 {
position: absolute;
width: 200px;
height: 200px;
background-color: blue;
}
.box2 {
top: 50px;
left: 50px;
background-color: red;
z-index: 1; /* 试试这句话加与不加有什么区别 */
}
.box3 {
top: 100px;
left: 100px;
background-color: pink;
}
style>
head>
<body>
<div class="box1">div>
<div class="box2">div>
<div class="box3">div>
body>
注意：
- 数值可以是正整数、负整数或 0 ，默认是 auto ，数值越大，盒子越靠上
- 如果属性值相同，则按照书写顺序，后来者居上
- 数字后面不能加单位
- 只有定位的盒子才有
z-index属性
11、绝对定位的盒子居中算法
加了绝对定位的盒子不能通过margin: 0 auto;水平居中，但是可以通过其他方法：
left: 50%，让盒子的左侧移动到父级元素的水平中心位置。margin-left: -盒子的一半距离让盒子向左移动自身宽度的一半。
<style>
.box1 {
position: absolute;
width: 200px;
height: 200px;
background-color: pink;
/* 水平居中 */
left: 50%;
margin-left: -100px;
/* 垂直居中 */
top: 50%;
margin-top: -100px;
}
style>
head>
<body>
<div class="box1">div>
body>
12、定位特殊特性
- 行内元素添加绝对或固定定位，可以直接设置宽度高度
- 块级元素添加绝对或固定定位，如果不设置宽度和高度，默认大小就是内容的大小
- 浮动元素，绝对定位（固定定位）元素都不会触发外边距合并的情况。
- 绝对定位（固定定位）元素会完全压住下面标准流的盒子，包括内容也会压住，但是浮动元素就只会压住盒子，内容不会压住。
浮动之所以不会压住下面标准流盒子中的内容是因为浮动最初产生的目的是为了做环绕效果的
13、元素的显示与隐藏
类似网站广告，当我们点击关闭就不见了，但是当重新刷新页面的时候又会出现，这种效果的本质其实是：让一个元素在页面中隐藏或者显示出来
13.1 display属性
display属性用于设置一个元素应如何显示
display: none;隐藏对象display: block;除了转换为块级元素之外，还有显示元素的意思
注意： display 隐藏元素后，不再占有原来的位置。
应用及其广泛，搭配 JS 可以做出很多网页特效。
13.2 visibility 可见性
visibility: visible;元素可视visibility: hidden;元素隐藏
visibility属性用于指定一个元素可见还是隐藏，它与display最大的区别是，visibility隐藏元素后会继续占有原来的位置
如果隐藏完元素后想要留住原来的位置，就用visibility: hidden;
如果隐藏完元素不想要原来的位置，就用display: none （用处更多）
13.3 overflow溢出
overflow属性指定了如果内容溢出（超过指定高及宽度）时会发生什么
| 属性值 | 描述 |
|---|---|
| visible | 不剪切内容也不添加滚动条 |
| hidden | 不显示超出的内容，超出的部分隐藏掉 |
| scroll | 不管内容是否超出都会显示滚动条 |
| auto | 超出的部分显示滚动条，不超出不显示滚动条 |
注意：
如果有定位的盒子，而效果又需要超出的话，请慎用overflow: hidden; 因为它会隐藏多余的部分。