053 - 你的定位决定你的地位
本帖最后由 不二如是 于 2020-9-29 08:56 编辑上一集：052 -总为浮云能蔽日（下）
哈哈，废话不多说了，#敲黑板时刻！{:10_281:}
在线视频：传送门
课程思维导图
猛戳http://xxx.fishc.com/forum/201803/31/110408mxpszds1j1xxxahm.gif超清
position 属性决定了网页上元素的位置摆放情况。
有 5 个值，课上小甲鱼老师带我们都过了一遍。
position:static
static 是 position 属性的默认值。
如果省略 position 属性，浏览器就认为该元素是 static 定位。
这时，浏览器会按照源码的顺序，决定每个元素的位置，这称为"正常的页面流"。
每个块级元素占据自己的区块，元素与元素之间不产生重叠，这个位置就是元素的默认位置。
小甲鱼老师强调的：
static 定位所导致的元素位置，是浏览器自主决定的，所以这时 top、bottom、left、right 这四个属性无效。
一定要记住哦！
position:relative
relative 表示，相对于默认位置（即 static 时的位置）进行偏移，即定位基点是元素的默认位置。
它必须搭配 top、bottom、left、right 这四个属性一起使用，用来指定偏移的方向和距离。
演示代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>position</title>
<style>
#son {
width: 100px;
height: 100px;
background-color: red;
position: relative;
top: 50px;
}
</style>
</head>
<body>
<div id="father">
<div id="son"></div>
</div>
</body>
</html>
效果：
id 为 son 的 div 元素设置 top:50px 后，便从默认位置向下偏移 50 px。
就是上图蓝色虚线画出的距离。
position:absolute
absolute 表示，相对于上级元素（一般是父元素）进行偏移，即：
**** Hidden Message *****
它有一个重要的限制条件：
定位基点（一般是父元素）不能是 static 定位，否则定位基点就会变成整个网页的根元素 html
另外，absolute 定位也必须搭配 top、bottom、left、right 这四个属性一起使用。
还是用上面的代码，但稍微修改下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>position</title>
<style>
#father {
width: 300px;
height: 300px;
background-color: green;
position: relative;
top: 50px;
}
#son {
width: 100px;
height: 100px;
background-color: red;
position: absolute;
top: 50px;
}
</style>
</head>
<body>
<div id="father">
<div id="son"></div>
</div>
</body>
</html>
效果：
父元素是 relative 定位，子元素是 absolute 定位。
父元素本身相对根元素有 50px 的向下偏移。
子元素的定位基点是父元素，相对于父元素的顶部向下偏移 50px 。
如果父元素是 static 定位，上例的子元素就是距离网页的顶部向下偏移 50px 。
注意，absolute 定位的元素会被"正常页面流"忽略。
即在"正常页面流"中，该元素所占空间为零，周边元素不受影响。
position:fixed
fixed 表示，相对于视口（viewport，浏览器窗口）进行偏移，即定位基点是浏览器窗口。
这会导致元素的位置不随页面滚动而变化，好像固定在网页上一样。
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>position</title>
<style>
div {
width: 100px;
height: 100px;
background-color: blue;
position: fixed;
top: 100px;
left: 100px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
效果：
div元素始终在视口顶部，不随网页滚动而变化。
如果搭配 top、bottom、left、right这四个属性一起使用，表示元素的初始位置是基于视口计算的。
否则初始位置就是元素的默认位置。
position:sticky
sticky 跟前面四个属性值都不一样，它会产生动态效果。
很像 relative 和 fixed 的结合：
一些时候是 relative 定位（定位基点是自身默认位置），另一些时候自动变成 fixed 定位（定位基点是视口）。
因此，它能够形成"动态固定"的效果。
比如，小甲鱼老师举个通讯录例子、网页的搜索工具栏，初始加载时在自己的默认位置（relative 定位）。
页面向下滚动时，工具栏变成固定位置，始终停留在页面头部（fixed 定位）。
等到页面重新向上滚动回到原位，工具栏也会回到默认位置。
sticky 生效的前提是：
必须搭配top、bottom、left、right这四个属性一起使用，不能省略。
否则等同于 relative 定位，不产生"动态固定"的效果。
原因是这四个属性用来定义"偏移距离"，浏览器把它当作 sticky 的生效门槛。
它的具体规则是，当页面滚动，父元素开始脱离视口时（即部分不可见），只要与 sticky 元素的距离达到生效门槛，relative 定位自动切换为 fixed 定位。
等到父元素完全脱离视口时（即完全不可见），fixed 定位自动切换回 relative 定位。
演示代码（赚点鱼币{:10_256:} ）：
演示：
课后作业，完成了吗？
传送门
http://xxx.fishc.com/forum/201803/20/101934b3igkgm9hgbgz0ck.gif
下一集：054 - 不畏浮云遮望眼
如果有收获，别忘了评分{:10_281:} ：
http://xxx.fishc.com/forum/201709/19/094516hku92k2g4kefz8ms.gif
这位鱼油，如果喜欢本系列学习笔记，请订阅 淘专辑（传送门）（不喜欢更要订阅{:10_297:} ） 学习到这里，MARK！{:10_282:} 123 回复快快快 {:10_266:} 请问一下，a标签的父级是 div
然后该div设置了一个背景图片
那么问题来了，这个a标签无法接收鼠标点击动作
为什么要搞那么多偏移 1 想看
{:10_254:} {:5_95:} 66666666666666 相对定位，父元素动，子元素也动 1 1 爱鱼C {:10_257:} {:10_312:} 学习了{:10_333:}
页:
[1]