一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第2天，点击查看活动详情。

定位position

定位原理相当简单。你可以相对元素框的常规位置定义元素的具体位置，可以相对父元素或另一个元素定位元素的位置，甚至还可以相对视区(例如浏览器窗口)定位元素的位置。

1.为什么需要定位

借助定位可以随意移动元素，这是常规文档流难以企及的。虽然很多定位技巧终将被取代，但定位仍然有大量用途，例如让侧边栏始终显示在视区中，或者粘滞显示列表或长文中的小节标题。

以下情况使用标准流或者浮动能实现吗？

某个元素可以自由的在一个盒子内移动位置，并且压住其他盒子
当我们滚动窗口，盒子是固定在屏幕的某个位置

以上效果，标准流或者浮动都无法快速实现，此时需要定位来实现。
所以：
浮动可以让多个块级盒子一行没有缝隙地排列显示，经常用于横向排列盒子。
定位则是可以让盒子自由的在某个盒子内移动位置或者固定屏幕中某个位置并且可以压住其他盒子

2.定位组成及类型

定位 = 定位类型 + 偏移属性

定位类型

定位有五种类型，不同类型生成元素框的方式有所不同。定位类型使用position属性指定 position属性各值的含义如下。

static： 简单来说，静态定位就是标准流，一般不用它

relative： 元素框偏移一定的距离。元素的形状与未定位时一样，而且元素所占的空间也与正常情况下相同。

absolute： 元素框完全从标准流中移除，相对容纳块定位。此时，容纳块可能是文档中的另一个元素，也可能是初始容纳块(就是子绝父相)。正常情况下元素在标准流中占据的空间不复存在，好似元素没有出现过一样。不管元素在常规的文档流中生成什么类型的框体，定位后生成的都是块级框。

fixed： 元素框的行为类似于absolute，不过容纳块是视区自身。

还有一个粘性定位 sticky

偏移属性

这些属性指定距离容纳块最近的边的偏移(因此才叫偏移属性)。

偏移属性	示例	描述
top	top:10px	顶部偏移量，定义元素相对于其父元素上边线的距离
bottom	bottom:9px	底部偏移量，定义元素相对于其父元素下边线的距离
left	left:8px	左侧偏移量，定义元素相对于其父元素左边线的距离
right	right:7px	右侧偏移量，定义元素相对于其父元素右边线的距离

以下是对上述内容的详细解析

相对定位

相对定位relative（重要）相对定位是元素在移动的时候，是相对于它原来的位置来说的。语法：选择器 {position：relative；}

特点：
a. 它是相对于自己原来的位置来移动的
b. 原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待它
（不脱离标准流，继续保留原来的位置）

示例：
<div class="box1"></div>
<div class="box2"></div>

    .box1 {
            /* 定位类型： */
            position: relative;
            /* 偏移属性： */
            top: 100px;
            left: 100px;


            width: 200px;
            height: 200px;
            background-color: rgb(4, 194, 247);
        }

        .box2 {
            width: 200px;
            height: 200px;
            background-color: chartreuse;
        }

绝对定位

绝对定位absolute（重要）
绝对定位是元素在移动的时候，是相对于它祖先元素（父，爷，曾爷）来说的。
语法：选择器 {position：absolute；}

绝对定位特点1：如果没有祖先元素或者祖先元素没有定位，则以浏览器(body)为准定位(Document文档)

    <div class="nofather"></div>
    <div class="father">
         I am father
         <div class="son">I am son</div>
    </div>

    .nofather {
            position: absolute;
            left: 0;
            bottom: 0;
            /* top: 100px;
            left: 200px; */
            /* 
            top: 0;
            right: 0; 
            */
            /* 这种是属于没有祖先元素的情况，这时候则以body为准来定位 */
            width: 200px;
            height: 200px;
            background-color: pink;
        }

        .father {
            width: 500px;
            height: 500px;
            background-color: powderblue;
        }

        .son {
            position: absolute;
            right: 0;
            top: 0;
            /* 这种情况属于第一个特点的第二种情况：即我有祖先元素，但是祖先元素没有定位，
            这时候我还是以浏览器为准 */
            width: 200px;
            height: 200px;
            background-color: seagreen;
        }

绝对定位特点2：如果祖先元素有定位（相对、绝对、固定定位），则以最近一级的有定位的祖先元素为参考点进行移动位置(最近一级很好理解，就是爸爸没有就去找爷爷，以此类推)

    <div class="gramdpa">
        <div class="father">
            <div class="son"></div>
        </div>
    </div>

        .gramdpa {
            /* 相对于son盒子来说，son的父亲没有定位，但是它的爷爷有定位
            根据绝对定位的特点，这时候son会以gramdpa盒子为参考点进行移动 */

            /* 如果son盒子的爸爸有定位，爷爷也有定位，则以爸爸为准，因为是最近一级 */
            position: relative;

            width: 1000px;
            height: 1000px;
            background-color: purple;
        }

        .father {
            /* 给祖先元素加一个定位（什么定位都行），来约束有定位的子元素 */
            /* position: relative; */
            width: 500px;
            height: 500px;
            background-color: skyblue;
        }

        .son {
            position: absolute;
            left: 0;
            bottom: 0;


            width: 200px;
            height: 200px;
            background-color: pink;
        }

绝对定位特点3：绝对定位，不再占有原先位置！

    <div class="father">
        <div class="damao"></div>
        <div class="ermao"></div>
        <!-- 比如这里两个子盒子，我给大毛添加了绝对定位，二毛还是标准流。
        这时候，二毛就会占领大毛的位置 -->
    </div>

    .father {
            width: 700px;
            height: 700px;
            background-color: skyblue;
        }

        .damao {
            position: absolute;
            width: 100px;
            height: 100px;
            background-color: pink;
        }

        .ermao {
            width: 200px;
            height: 200px;
            background-color: red;
        }
    </style>

定位特殊特性：绝对定位和固定定位也和浮动类似。

行内元素添加绝对或者固定定位，可以直接设置高度和宽度。

块级元素添加绝对或者固定定位，在没有设置宽高的情况下，宽度与内容一致。

说一说大家耳熟能详的 "子绝父相"

子绝父相：
这四个字规定了绝对定位和相对定位的使用场景。
意思是：子级是绝对定位的话，那么父级一定要用相对定位

为什么？

子级绝对定位，而绝对定位的盒子又不占有位置，可以放到父盒子里的任何地方不影响其他兄弟盒子。
因为子级是绝对定位，那么父级就要添加定位，来约束子盒子（使子盒子在父盒子中显示）
父盒子布局时又要占有位置，而父盒子既要约束子盒子又要占有位置,这符合相对定位的特点所以只能用相对定位。

这就是子绝父相的由来，所以相对定位经常用到绝对定位的元素的父元素身上。

固定定位

固定定位的特点：

以浏览器的可视窗口为参照点来移动元素（可视窗口就是可视窗口。。。）
● 跟父元素没有任何关系
● 不随滚动条滚动而滚动
固定定位不再占有原来的位置！
● 固定定位也是脱离标准流的，可以看成特殊的绝对定位！

粘性定位

粘性定位：
粘性定位可被认为是相对定位和固定定位的混合。
语法：选择器 {position：sticky；边偏移：；}

粘性定位的特点：
1.以浏览器的可视窗口为参照点来移动元素。（固定定位特点）
2.粘性定位占有原先的位置（相对定位特点）
3.必需添加边偏移（top、bottom、left、right）才会起效
（不添加边偏移会被当做相对定位的盒子）

这个属性有兼容性问题
<div class="nav">我是导航栏</div>

    body {
            height: 2000px;
        }

        .nav {
            position: sticky;
            top: 10px;
            /* 加了边偏移之后，粘性定位才会生效。这里的top：10px的意思是，当浏览器滚动条滚动时
            它还是一个正常的盒子，原来在哪就在哪。当我距离浏览器可视区域10px时，我就会粘
            在浏览器上。当滚动条回滚，这个盒子回到原来的位置后（并且top>0时），就会从
            可视区域脱落。      看效果吧，不好解释*/

            width: 1000px;
            height: 50px;
            background-color: skyblue;
            margin: 100px auto;
        }
        
        这里就不演示效果了，不知道怎么放动图，哈哈😄

3.定位盒子的叠放次序(Z轴上的位置)

了解一些定位知识之后，可以想到的是，终有那么一个时刻，两个带有定位的盒子会出现在相同的位置，当然这指的是视觉上的效果。相同位置上的元素将重叠在一起，那么如何控制哪个元素在“上面”呢？答案是z-index属性。

z-index

z-index用于调整元素之间重叠的方式。这个属性的名称源自坐标系，其中从左到右是x轴，从上到下是y轴。第三个轴，即由后到前，像是从你面前的屏幕射出来的一样，称为z轴。
因此，为元素设置的z-index值就在这个轴上。

语法：选择器 {position：....；z-index：1；}

● z-index里的数值可以任何整数，默认是auto，数值越大，在z轴就越靠上
● 如果大家数值相同（或者是auto）的情况下，则按照后来者居上
● 数字后面不能加单位！
● 只有定位的盒子有 z-index属性！！

4.元素的显示与隐藏

在CSS权威指南定位这一章中，也介绍了元素的显示与隐藏,这里简单记录一下

display属性用于设置一个元素如何显示。
· display: none; 隐藏对象
· display：block; 显示对象

display隐藏元素后，元素不再占有原来的位置

2.Visibility可见性：
语法：visibility : inherit | visible | hidden

inherit ：继承父亲的可见性
visible : 元素可视
hidden : 元素隐藏

注意与display区别：
当用visibility隐藏元素时，该元素还会占有原来的位置！

当前使用场景：清除浮动的时候用到的伪元素法需要visibility

3.overflow属性指定了如果内容溢出一个元素的框（超出指定的宽高时），将会发生什么。

语法：{overflow：visible | auto | hidden | scroll}

overflow: visible; 加不加都一样，默认的visible不剪切内容也不添加滚动条

overflow: hidden; hidden值溢出框的内容将被隐藏，比如咱给一个盒子添加这个属性，
然后给其子盒子添加定位，让其越出父盒子的框，这时候就会被隐藏。

overflow: scroll; 添加该属性后，总是会显示滚动条

overflow: auto; auto 在内容溢出时，自动添加滚动条；没溢出时，就不添加滚动条

以上，如果有错误的地方，请各位爷多多指教，小的我会虚心请教~

关于定位position