📝个人主页：爱吃炫迈
💌系列专栏：HTML+CSS
🧑💻座右铭：道阻且长，行则将至💗
文章目录
- 标准流（Normal Flow）
- 元素定位
- position属性
- 静态定位-static
- 相对定位-relative
- 固定定位-fixed的
- 绝对定位-absolute
- 粘性定位-sticky
标准流（Normal Flow）
默认情况下，元素都是按照normal flow（标准流、常规流、正常流、文档流）进行排布：
-
从左到右、从上到下按顺序摆放好
-
默认情况下，互相之间不存在层叠现象
在标准流中，可以使用margin，padding对元素进行定位。
缺点：
- 设置一个元素的
margin或者padding，通常会影响到标准流中其他元素的定位效果 - 不便于实现元素层叠的效果
如果我们希望一个元素可以跳出标准流，单独的对某个元素进行定位：可以通过position属性来进行设置
元素定位
定位允许从正常的文档流布局中取出元素，并使它们具有不同的行为：
- 例如放在另一个元素的上面
- 或者始终保持在浏览器视窗内的同一位置
position属性
利用position可以对元素进行定位，常用取值有5个：static，relative，absolute，sticky，fixed。
默认值：
static：默认值，静态定位
使用下面的值，可以让元素变成==定位元素==：
relative：相对定位
absolute：绝对定位
fixed：固定定位
sticky：粘性定位
静态定位-static
position属性的默认值
- 元素按照normal flow布局
- left、right、top、bottom没有任何作用
相对定位-relative
-
元素按照normal flow布局
-
可以通过left、right、top、bottom进行定位
- 定位参照对象是元素自己原来的位置
-
left、right、top、bottom用来设置元素的具体位置，对元素的作用如下图所示：
- 相对定位的应用场景：在不影响其他元素位置的前提下，对当前元素位置进行微调
固定定位-fixed的
- 元素脱离normal flow（脱离标准流、脱标）
- 可以通过left、right、top、bottom进行定位
- 定位参照对象是视口（viewport）
- 当画布滚动时，固定不动
视口（Viewport）：文档的可视区域
画布（Canvas）：用于渲染文档的区域，文档内容超出视口范围，可以通过滚动查看
宽高对比：画布>=视口
绝对定位-absolute
- 元素脱离normal flow（脱离标准流、脱标）
- 可以通过left、right、top、bottom进行定位
- 定位参照对象是最邻近的定位祖先元素
- 如果找不到这样的祖先元素，参照对象是视口
子绝父相：
在绝大数情况下，子元素的==绝对定位都是相对于父元素进行定位==
如果希望子元素相对于父元素进行定位，又不希望父元素脱标，常用解决方案是：“子绝父相”
- 父元素设置
position:relative（让父元素成为定位元素，而且父元素不脱离标准流） - 子元素设置
position:absolute
绝对定位元素的特点：
- 可以随意设置宽高
- 宽高默认由内容决定
- 不在受标准流的约束
- 不再严格按照从上到下、从左到右排布
- 不再严格区分块级、行内级，块级、行内级的很多特性都会消失
- 不再给父元素汇报宽高数据
- 脱标元素内部默认还是按照标准流布局
- 定位参照对象的宽度=
left+right+margin-left+margin-right+绝对定位元素的实际占用宽度 - 定位参照对象的高度=
top+bottom+margin-top+margin-bottom+绝对定位元素的实际占用高度 - 如果希望绝对定位元素的宽度和定位参照对象一样，可以给绝对定位元素设置以下属性：
left:0，right:0，margin:0 - 如果希望绝对定位元素的高度和定位参照对象一样，可以给绝对定位元素设置以下属性：
top:0，bottom:0，margin:0 - 如果希望绝对定位元素在定位参照对象中居中显示，可以给绝对定位元素设置以下属性：
left:0，right:0，top:0，bottom:0，margin:auto- 另外，还得设置具体的宽高值（宽高小于定位参照对象的宽高）
绝对定位案例：
// html
<body><div class="item"><div class="top"><img src="./imgs/music_album.jpg" alt="音乐封面" /><a class="cover" href="#"></a><div class="info"><i class="icon"></i><span class="count">2917万</span><i class="icon1"></i></div></div><div class="bottom"><a href="#">听首老歌 回味永不褪色的华语经典</a></div></div></body>
// css<style>.item {width: 140px;margin: 0 auto;}.item .top {position: relative;}.item .top img {display: block;}.item .top .cover {position: absolute;top: 0;left: 0;/* width: 140px;height: 140px; */right: 0;bottom: 0;/* 精灵图 */background-image: url(./imgs/music_sprite.png);background-position: 0 0;}.item .top .info {position: absolute;width: 100%;height: 27px;line-height: 27px;left: 0;bottom: 0;font-size: 12px;color: #ccc;background-image: url(./imgs/music_sprite.png);background-position: 0 -537px;}.item .top .info .icon {display: inline-block;width: 14px;height: 11px;background-image: url(./imgs/music_sprite1.png);background-position: 0 -24px;margin: 0 3px 0 10px;}.item .top .info .icon1 {position: absolute;display: inline-block;top: 0;bottom: 0;margin: auto 0;right: 10px;width: 16px;height: 17px;background-image: url(./imgs/music_sprite1.png);background-position: 0 0;}.item .bottom {font-size: 14px;}.item .bottom a {display: inline-block;max-width: 100%;line-height: 1.4;color: #000;vertical-align: middle;text-decoration: none;margin: 8px 0 3px;}</style>
粘性定位-sticky
- sticky可以看做是相对定位和固定(绝对)定位的结合体；
- 它允许被定位的元素表现得像相对定位一样，；
- 直到它滚动到某个阈值点，当达到这个阈值点时, 就会变成固定(绝对)定位；
vertical-align: middle;
text-decoration: none;
margin: 8px 0 3px;
}
# 粘性定位-sticky- sticky可以看做是相对定位和固定(绝对)定位的结合体；
- 它允许被定位的元素表现得像相对定位一样，；
- 直到它滚动到某个阈值点，当达到这个阈值点时, 就会变成固定(绝对)定位；- sticky是相对于最近的滚动祖先包含滚动视口的
