📝个人主页：爱吃炫迈
💌系列专栏：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是相对于最近的滚动祖先包含滚动视口的
