文章目录
文档流
在讲position属性之前,我们先要了解文档流的基本概念,有助于我们深入理解position的每个值的特点。
我们来看看什么是文档流(normal flow),下面是 www.w3.org 的描述:
Normal flow
Boxes in the normal flow belong to a formatting context, which may be block or inline, but not both simultaneously. Block-level boxes participate in a block formatting context. Inline-level boxes participate in an inline formatting context.
翻译:
正常流中的框属于格式化上下文,它可以是块或内联的,但不能同时是块和内联的。块级别的框参与块格式化上下文。内联级别的框参与内联格式上下文。
简单的说就是:
- normal flow直译为常规流、正常流,国内大多翻译为文档流
- 窗体自上而下分成一行一行,并在每行中按从左至右的顺序排放元素
- 每个非浮动块级元素都独占一行;非浮动的内联元素则从左到右连续排列,直到改行容纳不下再另起一行
- 浮动元素则按规定浮在行的一端,若当前行容不下,则另起新行再浮动
- 几乎所有元素(包括块级,内联和列表元素)均可生成子行,用于摆放子元素
- 有三种情况将使得元素脱离normal flow而存在,分别是 float,absolute ,fixed,但是在IE6中浮动元素也存在于normal flow中。
position详解
position属性指定一个元素(静态的,相对的,绝对或固定)的定位方法的类型。默认取值 static
,它所有可取的值见下表:
可取值 | 描述 |
---|---|
static | 默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。 |
relative | 生成相对定位的元素,相对于其正常位置进行定位。 |
absolute | 生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。 |
fixed | 生成固定定位的元素,相对于浏览器窗口进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。 |
sticky | 粘性定位,该定位基于用户滚动的位置。它的行为就像 position:relative; 而当页面滚动超出目标区域时,它的表现就像 position:fixed;,它会固定在目标位置。 注意: Internet Explorer, Edge 15 及更早 IE 版本不支持 sticky 定位。 Safari 需要使用 -webkit- prefix (查看以下实例)。 |
inherit | 规定应该从父元素继承 position 属性的值。 |
initial | 设置该属性为默认值 |
在开始对每个属性值进行讲解前,先来个思维导图:
position 之 static
默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。
注意:
- 默认从父级元素的左上角开始布局,如果父级元素有padding属性,则所在位置会按照padding值进行调整
- 它的margin属性是相对于postion为static的位置起作用的(如果附近有relative的元素,则margin是相对于该元素的默认位置计算外边距)
实例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>change-to-flex</title>
<link rel="stylesheet" href="./reset.css">
<style>
body {
margin: 0;
}
.block {
position: relative;
top:10px;
width: 50px;
height: 50px;
line-height: 50px;
text-align: center;
border: 2px solid blue;
box-sizing: border-box;
}
/* 忽略 top 属性 */
.block:nth-child(2){
position: static;
border-color:red;
}
</style>
</head>
<body>
<div class="block">
A
</div>
<div class="block">
B
</div>
<div class="block">
C
</div>
<div class="block">
D
</div>
</body>
</html>
运行:
从运行结果可以看出,A、C、D元素都相对默认位置,向下偏移了10px,而B因为是static 的缘故,忽略了top的值,保持默认在文档流中的位置
position 之 relative
生成相对定位的元素,通过top,bottom,left,right的设置相对于其正常(原先本身)位置进行定位。可通过z-index进行层次分级。
注意:
- 他是默认参照默认static的位置配合TRBL(top,right,bottom,left)进行相对定位
- 可以理解成虽然相对原来的位置发生了偏移,但是原来的位置的坑还占着在,margin的计算还是参照原来的坑位计算
实例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>change-to-flex</title>
<style>
body {
margin: 0;
}
.border {
width: 200px;
height: 224px;
padding: 10px;
border: 2px solid blue;
box-sizing: border-box;
}
.block {
width: 100px;
height: 100px;
background-color: red;
position: relative;
top: 20px;
left: 20px
}
.static {
width: 100px;
height: 100px;
background-color: yellow;
}
</style>
</head>
<body>
<div class="border">
<div class="block"></div>
<div class="static"></div>
</div>
</body>
</html>
运行:
position 之 absolute
生成绝对定位的元素,相对于 static
定位以外的第一个父元素进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行调整。可通过z-index进行层次分级。
注意:
- 相对于
static
定位以外的第一个父元素进行定位- absolute会造成撑开的父元素发生坍塌
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>change-to-flex</title>
<style>
body {
margin: 0;
}
.block {
width: 100px;
height: 100px;
background-color: red;
position: absolute;
}
.border {
width: 300px;
border: 2px solid blue;
}
</style>
</head>
<body>
<div class="border">
<div class="block"></div>
</div>
</body>
</html>
注意:
- 如果position为absolute的元素的lrtb都没有设置(即为auto),则该元素的将仍然会按照正常文档流布局,但是其原来在文档中的坑并不会被占着,所以父元素仍会有高度坍塌的现象
- Top的值表示对象上边框与浏览器窗口顶部的距离,bottom的值表示对象下边框与浏览器窗口底部的距离,两者同时存在时,只有Top起作用;如果两者都未指定,则其顶端将与原文档流位置一致,即垂直保持位置不变
- left的值表示对象左边框与浏览器窗口左边的距离,right的值表示对象右边框与浏览器窗口右边的距离,两者同时存在时,只有left起作用;如果两者都未指定,则其左边将与原文档流位置一致,即水平保持位置不变
- 1和relative之间的margin回取最大值不同,absolute元素的margin不会和其它的margin合并
实例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>change-to-flex</title>
<style>
body {
margin: 0;
}
.border-re {
width: 40px;
height: 40px;
border: 2px solid blue;
margin: 10px;
}
.border {
width: 40px;
height: 40px;
border: 2px solid blue;
margin: 10px;
position: absolute;
}
</style>
</head>
<body>
<div class="border-re"></div>
<div class="border"></div>
</body>
</html>
运行:
position 之 fixed
生成绝对定位的元素,相对于浏览器窗口进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。可通过z-index进行层次分级。
注意:
- fixed和relative的特点差不多,唯一的区别就是ltrb的对象不同,一个是非static的父元素,一个是浏览器的窗口
position 之 sticky
position属性中最有意思的就是sticky了,设置了sticky的元素,在屏幕范围(viewport)时该元素的位置并不受到定位影响(设置是lrtb等属性无效),当该元素的位置将要移出偏移范围时,定位又会变成fixed,根据设置的lrtb等属性成固定位置的效果。
这里有一段mdn上的描述:
盒位置根据正常流计算(这称为正常流动中的位置),然后相对于该元素在流中的 flow root(BFC)和 containing block(最近的块级祖先元素)定位。在所有情况下(即便被定位元素为 table时),该元素定位均不对后续元素造成影响。当元素 B 被粘性定位时,后续元素的位置仍按照 B 未定位时的位置来确定。position: sticky对 table元素的效果与 position: relative 相同。
由于sticky并不是w3c推荐的标准,且兼容性不好,这里就不深入讨论了。如果想实现类似的效果,通过js完全可以实现。
———————————————————————————
本文部分内容摘自CSDN博主「姜皓」的原创文章,文章链接:https://blog.csdn.net/jianghao233/article/details/80534835