二十七、定位（上）

2021-03-08 本文已影响0人 honest涛

一、定位

1.1 为什么需要定位

提问：以下情况使用标准流或者浮动能实现吗？
$\color{red}{1.某个元素可以自由的在一个盒子内移动位置，并且压住其他盒子}$ 。

image.png

\color{red}{2.当我们滚动窗口的时候，盒子是固定屏幕某个位置的}

。

image.png 以上效果，标准流或浮动都无法快速实现，此时

\color{red}{需要定位来实现}

。
所以：
1.浮动可以让多个块级盒子一行没有缝隙排列显示，经常用于横向排列盒子。
2.定位则是可以让盒子自由的在某个盒子内移动位置或者固定屏幕中某个位置，并且可以压住其他盒子。

1.2、定位组成

$\color{red}{定位}$ ：将盒子 $\color{red}{定}$ 在某一个 $\color{red}{位}$ 置，所以 $\color{red}{定位也是在摆放盒子，按照定位的方式移动盒子。}$
定位 = 定位模式 + 边偏移。
$\color{red}{定位模式}$ 用于指定一个元素在文档中的定位方式， $\color{red}{边偏移}$ 则决定了该元素的最终位置。

1.2.1 定位模式

定位模式决定元素的定位方式，它通过CSS的 $\color{red}{position}$ 属性来设置，其值可以分为四个：

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

1.2.2、静态定位 static（了解）

静态定位是元素的 $\color{red}{默认定位方式}$ ， $\color{red}{无定位的意思}$ 。

语法：
选择器 { position: static; }

静态定位按照标准流特性摆放位置，它没有边偏移
静态定位在布局时很少用到

1.2.3 相对定位 relative（重要）

$\color{red}{相对定位}$ 是元素在移动位置的时候，是相对于它 $\color{red}{原来的位置}$ 来说的（自恋型）。

语法：
选择器 { position： relative；}

相对定位的特点：（务必记住）
1.它是相对于自己原来的位置来移动的（ $\color{red}{移动位置的时候参照点是自己原来的位置}$ ）。
2. $\color{red}{原来}$ 在标准流的 $\color{red}{位置}$ 继续占用，后面的盒子仍然以标准流的方式对待它。（ $\color{red}{不脱标，继续保留原来位置}$ ）。
因此，相对定位并没有脱标。它最典型的应用是给绝对定位当爹的。。。

相对定位.png

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>相对定位</title>
    <style>
        .box1 {
            position: relative;
            top: 100px;
            left: 100px;
            width: 200px;
            height: 200px;
            background-color: pink;
        }
        .box2 {
            width: 200px;
            height: 200px;
            background-color: deeppink;
        }
    </style>
</head>
<body>
    <div class="box1">

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

    </div>
</body>
</html>

1.2.4 绝对定位 absolute（重要）

$\color{red}{绝对定位}$ 是元素在移动位置的时候，是相对于它 $\color{red}{祖先元素}$ 来说的（拼爹型）。

语法：
选择器：{ position：absolute；}

绝对定位的特点：（务必记住）
1.如果 $\color{red}{没有祖先元素}$ 或者 $\color{red}{祖先元素没有定位}$ ，则以浏览器为准定位（Document文档）。
2.如果祖先元素有定位（相对、绝对、固定定位），则以最近一级的有定位祖先元素为参考点移动位置。
3.绝对定位 $\color{red}{不再占有原先的位置}$ 。（脱标）

绝对定位-无父亲或者父亲无定位.png

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>绝对定位-无父亲或者父亲无定位</title>
    <style>
        .father {
            width: 500px;
            height: 500px;
            background-color: skyblue;
        }
        .son {
            position: absolute;
            left: 0;
            bottom: 0;
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son"></div>
    </div>
</body>
</html>

绝对定位-父级有定位.png

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>绝对定位-父级有定位</title>
    <style>
        .yeye {
            position: relative;
            width: 800px;
            height: 800px;
            background-color: hotpink;
            padding: 50px;
        }
        .father {
          
            width: 500px;
            height: 500px;
            background-color: skyblue;
        }
        .son {
            position: absolute;
            left: 30px;
            bottom: 10px;
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div class="yeye">
        <div class="father">
            <div class="son"></div>
        </div>
    </div>
</body>
</html>

1.2.5 子绝父相的由来

弄清楚这个口诀，就明白了绝对定位和相对定位的使用场景。
这个“子绝父相”太重要了，是我们学习定位的口诀，是定位中最常用的一种方式这句话的意思是： $\color{red}{子级是绝对定位的话，父级要用相对定位}$ 。
① 子级绝对定位，不会占有位置，可以放到父盒子里面的任何一个地方，不会影响其他的兄弟盒子。
② 父盒子需要加定位限制子盒子在父盒子内显示。
③ 父盒子布局时，需要占有位置，因此父亲只能是相对定位。
这就是子绝父相的由来，所以 $\color{red}{相对定位经常用来作为绝对定位的父级}$ 。
总结： $\color{red}{因为父级需要占有位置，因此是相对定位，子盒子不需要占有位置，则是绝对定位。}$
当然，子绝父相不是永远不变的，如果父元素不需要占有位置， $\color{red}{子绝父绝}$ 也会遇到。

1.2.6 固定定位 fixed（重要）

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

语法：
选择器 { position：fixed；}

固定定位的特点：（务必记住）

以浏览器的可视窗口为参照点移动元素。

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

固定定位 $\color{red}{不在占有原先的位置}$ 。
固定定位也是脱标的，其实固定定位也可以看做是一种特殊的绝对定位。

$\color{red}{固定定位小技巧：固定在版心右侧位置。}$
小算法：

让固定定位的盒子 left:50%，走到浏览器可视区（也可以看做版心）的一半位置。
让固定定位的盒子margin-left:版心宽度的一半距离。多走版心宽度的一半位置就可以让固定定位的盒子贴着版心右侧对齐了。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>固定定位小技巧-固定到版心右侧</title>
    <style>
        .w {
            width: 800px;
            height: 1400px;
            background-color: pink;
            margin: 0 auto;
        }
        .fixed {
            position: fixed;
            /* 1. 走浏览器宽度的一半 */
            left: 50%;
            /* 2. 利用margin 走版心盒子宽度的一半距离 */
            margin-left: 405px;
            width: 50px;
            height: 150px;
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <div class="fixed"></div>
    <div class="w">版心盒子 800像素</div>
</body>
</html>

固定到版心右侧.png

1.2.7 粘性定位 sticky（了解）

$\color{red}{粘性定位}$ 可以被认为是相对定位和固定定位的混合。sticky粘性的。

语法：
选择器 { position: sticky；top: 10px；}

粘性定位的特点：

以浏览器的可视窗口为参照点移动元素（固定定位特点）
粘性定位 $\color{red}{占有原先的位置}$ （相对定位特点）
必须添加top、left、right、bottom其中一个才有效
跟页面滚动搭配使用。兼容性较差，IE不支持。

1.2.8 定位的总结

定位模式	是否脱标	移动位置	是否常用
static静态定位	否	不能使用边偏移	很少
$\color{red}{relative相对定位}$	$\color{red}{否（占有位置）}$	$\color{red}{相对于自身位置移动}$	$\color{red}{常用}$
$\color{red}{absolute绝对定位}$	$\color{red}{否（不占有位置）}$	$\color{red}{带有定位的父级}$	$\color{red}{常用}$
$\color{red}{fixed固定定位}$	$\color{red}{否（不占有位置）}$	$\color{red}{浏览器可视区}$	$\color{red}{常用}$
sticky粘性定位	否（占有位置）	浏览器可视区	当前阶段少