H5零基础-定位模式

定位的使用场景：

京东.png 淘宝.png

以上效果，标准流或浮动都无法快速实现，此时需要定位来实现。

定位可以让盒子自由的在某个盒子内移动位置 或 固定屏幕中某个位置，并可以压住其它盒子。

定位：将盒子定在某一个位置，所以定位也是在摆放盒子，按照定位的方式移动盒子。

定位 = 定位模式 + 边偏移

定位模式 用于指定一个元素在文档中的定位方式。
边偏移则决定了钙元素的最终位置。

一、定位模式

position : static | absolute | fixed | relative

定位模式决定元素的定位方式，它通过CSS的position属性来设置，有以下四个值：

值	语义
static	静态定位
relative	相对定位
absolute	绝对定位
fixed	固定定位

1.1 静态定位 static (了解)

静态定位是元素的默认定位方式，无定位的意思。
语法：

选择器 {position : static ;}

静态定位特点：

• 静态定位按照标准流特性摆放位置，它没有边偏移
• 静态定位在不居中很少用到。

1.2 相对定位 relative

相对定位是元素在移动位置的时候，是相对于原来的位置来说的。[自恋型]
语法：

选择器 {position : relative ;}

示例代码：

<style>
        .box1 {
            position: relative;
            top: 100px;
            left: 100px;
            width: 200px;
            height: 200px;
            background-color: pink;
        }

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

<div class="box1"></div>
<div class="box2"></div>

运行效果图：

image.png

运行效果分析图：

image.png

相对定位的特点：(重要)

• 它是相对于自己原来的位置来移动的(移动位置的时候参照点是自己原来的位置)
• 原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待它。(不脱标，继续保留原来位置)
• 相对位置没有投标。

1.3 绝对定位 absolute （重要）

绝对定位是元素在移动位置的时候，是相对于它祖先元素来说的。[拼爹型]
语法：

选择器 {position : absolute ;}

示例代码1：(没有祖先元素或者祖先元素没有定位)

  <style>
      .son {
            position: absolute;
            top: 10px;
            left: 10px;
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>
    <div class="son"></div>

运行效果：

image.png

示例代码2：[祖先元素有定位(相对、绝对、固定定位)]

  <style>
      .father {
            position: relative;
            width: 500px;
            height: 500px;
            background-color: deeppink;
        }

        .son {
            position: absolute;
            top: 10px;
            left: 10px;
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style> 

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

运行效果：

image.png

绝对定位的特点： (非常重要)

• 1.如果没有祖先元素或者祖先元素没有定位，则以浏览器为准定位(Document文档)
• 2.如果祖先元素有定位(相对、绝对、固定定位)，则以最近一级的有定位祖先元素为参考点移动位置。
• 3.绝对定位不在占有原先的位置。(脱标)

⚠️相对定位relative vs 绝对定位absolute ⚠️

• 子级是绝对定位的话，父级要用相对定位；[子绝 父相]
• 子级绝对定位，不会占有位置，可以放到父盒子里面的任何一个地方，不会影响其他的兄弟盒子；
• 父盒子需要加定位限制子盒子在父盒子内显示；

小结：因为父级需要占有位置，因此是相对位置，子盒子不需要占有位置，则是绝对定位。
当然，子绝父相不是永恒不变的，如果父元素不需要占有位置，子绝父绝也会用到。

1.4 固定定位 fixed

固定定位是元素固定于浏览器可视区域的位置。
主要使用场景：可以在浏览器页面滚动时元素的位置不会改变。

语法：

选择器 {position : fixed ;}

固定定位的特点: (非常重要)
1.以浏览器的可视窗口为参照点移动元素。

• 跟父元素没有任何关系；
• 不随滚动条滚动。

2.固定定位不在占有原先的位置

• 固定定位也是脱标的，其实固定定位也可以看做是一种特殊的绝对定位。

1.5 粘性定位 sticky （了解）

粘性定位可以被认为是相对定位和固定定位的混合。

语法：

选择器 {position : sticky ; top:10px; }

示例代码：

   <style>
     body {
            height: 3000px;
        }

        .nav {
            position: sticky;
            top: 0;
            width: 800px;
            height: 50px;
            background-color: pink;
            margin: 100px auto;
        }
    </style>

  <div class="nav">我是导航栏</div>

运行效果：

当向下滑动的时候，导航栏会悬浮到顶部。滑动到最顶部的时候，距离顶部100px。

image.png image.png

粘性定位的特点：

• 以浏览器的可视窗口为参照点移动元素(固定定位特点)；
• 粘性定位占有原先的位置(相对定位特点)；
• 必须添加top 、left、right、bottom 其中的一个才有效。
• 兼容性查，IE不支持。

定位总结

定位模式	是否脱标	移动位置	是否常用
static静态定位	否	不能使用边偏移	很少
relative相对定位	否(占有位置)	相对资深位置移动	常用
absolute绝对定位	是(不占有位置)	带有定位的父级	常用
fixed固定定位	是(不占有位置)	浏览器可视区	常用
sticky 粘性定位	否(占有位置)	浏览器可视区	较少

END !