定位组成

定位:就是将盒子定在某一个位置,所以定位就是在摆放盒子,按照定位的方式移动盒子。

定位 = 定位模式 +边偏移

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

定位模式

定位模式决定元素的定位方式,通过css的position来设置
一共分为四个

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

静态定位(static)

语法:position:static;
静态定位按照标准流的特性摆放位置,他没有边偏移。
静态定位在布局的时候很少用到。

相对定位(relative)

语法:position:relative;
相对定位相对于他原来的位置来移动
原来在标准流的位置继续占有
后面的盒子仍然以标准流的方式对待他(不脱标)
举个例子:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .d1{
            width: 100px;
            height: 100px;
            background-color: pink;
        }
        .d2{
            width: 100px;
            height: 100px;
            background-color: green;
        }
    </style>
</head>
<body>
<div class="d1"></div>
<div class="d2"></div>
</body>
</html>

不加定位的话,盒子会以标准流排列,div独占一行。
Snipaste_2022-04-27_12-35-55.png

我们试着给粉色的盒子加一个相对定位并使其偏移

<style>
        .d1{
            width: 100px;
            height: 100px;
            background-color: pink;
            /*新增代码*/
            position: relative;
            top: 20px;
            left: 20px;
        }
        .d2{
            width: 100px;
            height: 100px;
            background-color: green;
        }
    </style>

粉色盒子的位置发生了改变
但是原来的位置她还占有
下面的盒子不会顶上去
Snipaste_2022-04-27_12-37-19.png

绝对定位(absolute)

语法:position:absolute

绝对定位是元素在移动位置的时候,相对他祖先元素来说的。

如果没有祖先元素或者祖先元素没有定位,则以浏览器为准定位。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .son {
            width: 100px;
            height: 100px;
            background-color: pink;
            position: absolute;
            top: 50px;
            left: 50px;
        }
    </style>
</head>
<body>
<div class="son"></div>
</body>
</html>

Snipaste_2022-04-27_13-23-52.png

如果祖先元素有定位(相对、绝对、固定定位),则以最近一级有定位的祖先元素为参考点移动位置

例:我们设置
一个子盒子son
一个父盒子father
一个爷盒子grandfather

情况1:父爷都没有定位
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .grandfather{
            width: 500px;
            height: 500px;
            background-color: pink;
        }
        .father{
            width: 300px;
            height: 300px;
            background-color: orange;
        }
        .son{
            width: 150px;
            height: 150px;
            background-color: gray;
            position: absolute;
            top: 400px;
            left: 400px;
        }
    </style>
</head>
<body>
<div class="grandfather">
    <div class="father">
        <div class="son"></div>
    </div>
</div>
</body>
</html>

Snipaste_2022-04-27_13-42-04.png

情况2:爷没有定位、父有定位
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .grandfather{
            width: 500px;
            height: 500px;
            background-color: pink;
        }
        .father{
            width: 300px;
            height: 300px;
            background-color: orange;
            /*下面是新增代码*/
            position: relative;
            top: 100px;
            left: 100px;
        }
        .son{
            width: 150px;
            height: 150px;
            background-color: gray;
            position: absolute;
            top: 400px;
            left: 400px;
        }
    </style>
</head>
<body>
<div class="grandfather">
    <div class="father">
        <div class="son"></div>
    </div>
</div>
</body>
</html>

Snipaste_2022-04-27_13-43-19.png

我们可以看到,子盒子在相对父盒子进行移动了。

情况3:父没有定位、爷有定位
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .grandfather{
            width: 500px;
            height: 500px;
            background-color: pink;
            /*下面是新增代码*/
            position: relative;
            top: 50px;
            left: 50px;
        }
        .father{
            width: 300px;
            height: 300px;
            background-color: orange;
        }
        .son{
            width: 150px;
            height: 150px;
            background-color: gray;
            position: absolute;
            top: 400px;
            left: 400px;
        }
    </style>
</head>
<body>
<div class="grandfather">
    <div class="father">
        <div class="son"></div>
    </div>
</div>
</body>
</html>

Snipaste_2022-04-27_13-45-07.png
我们可以看到,由于父元素没有定位,子元素跟爷元素进行移动。

情况4:父有定位、爷也有定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .grandfather{
            width: 500px;
            height: 500px;
            background-color: pink;
            /*下面是新增代码*/
            position: relative;
            top: 50px;
            left: 50px;
        }
        .father{
            width: 300px;
            height: 300px;
            background-color: orange;
            /*下面是新增代码*/
            position: relative;
            top: 100px;
            left: 100px;
        }
        .son{
            width: 150px;
            height: 150px;
            background-color: gray;
            position: absolute;
            top: 400px;
            left: 400px;
        }
    </style>
</head>
<body>
<div class="grandfather">
    <div class="father">
        <div class="son"></div>
    </div>
</div>
</body>
</html>

Snipaste_2022-04-27_13-49-53.png

我们可以看到
虽然父盒子和爷盒子都动了,
但是相对位置来讲,子盒子在跟着父盒子动。
如上所讲,如果祖先元素有定位(相对、绝对、固定定位),则以最近一级有定位的祖先元素为参考点移动位置。
父盒子比爷盒子近。

绝对定位会使其脱离标准流

脱离标准流就是指,该元素不会占有原来的位置了。

例子:我们在父盒子里面套两个子盒子,方便比较

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .fa{
            width: 500px;
            height: 500px;
            border: 1px solid red;
        }
        .fa div{
            width: 200px;
            height: 200px;
        }
        .d1{
            background-color: red;
        }
        .d2{
            background-color: pink;
        }
    </style>
</head>
<body>
    <div class="fa">
        <div class="d1"></div>
        <div class="d2"></div>
    </div>
</body>
</html>

Snipaste_2022-04-27_13-57-19.png
两个子盒子遵守标准流,各占一行。
当我们上面的红色盒子改为绝对定位后

    <style>
        .fa{
            width: 500px;
            height: 500px;
            border: 1px solid red;
        }
        .fa div{
            width: 200px;
            height: 200px;
        }
        .d1{
            background-color: red;
            /*此处被修改*/
            position: absolute;
            top: 20px;
            left: 20px;
        }
        .d2{
            background-color: pink;
        }
    </style>

Snipaste_2022-04-27_13-58-27.png
我们看到,粉色盒子取代了之前红色盒子的位置
因为红色盒子绝对定位脱离了标准流,不占有原有的位置。

口诀:子绝父相

用人话讲,就是子级要用绝对定位,父级要用相对定位

为什么?

  • 子级绝对定位不会占有位置,可以放到父盒子里面的任何一个地方,不会影响其他的兄弟盒子。
  • 父盒子需要加定位限制子盒子在父盒子内显示。
  • 父盒子布局时,需要占有位置,因此父亲只能是相对定位。

固定定位(fixed)

语法:position:fixed
使用场景:在浏览器页面滚动的时候元素的位置不会改变。

特点:

  1. 以浏览器的可视窗口为参照点
  2. 跟父元素没有任何的关系
  3. 不随着滚动条滚动
  4. 不会占有原来的位置(脱标)

总结:固定定位可以换看做是一种特殊的绝对定位。

定位叠放次序z-index

在使用定位布局时,可能会出现盒子重叠的情况,
此时,可以使用z-index来控制盒子的前后次序(z轴)
语法:z-index:数值;
数值可以使正整数、负整数、0,默认是auto,数值越大,盒子越靠上。
如果属性值相同,则按照书写的顺序,后来居上。
数字后面不能加单位
只有定位的盒子才有z-index属性

我们先定义一个粉色盒子和一个灰色盒子,
然后给他们绝对定位,
并给一点偏移量

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .pink{
            width: 300px;
            height: 300px;
            background-color: pink;
            position: absolute;
            top: 1px;
            left: 1px;
            z-index: 2;
        }
        .gray{
            width: 300px;
            height: 300px;
            background-color: gray;
            position: absolute;
            top: 10px;
            left: 10px;
            z-index: 1;
        }
    </style>
</head>
<body>
<div class="pink"></div>
<div class="gray"></div>
</body>
</html>

Snipaste_2022-04-27_14-16-25.png
因为如果属性值相同,则按照书写的顺序,后来居上。
这个时候我们看到,灰色盒子在粉色盒子上面
我们把粉色盒子的z-index设置为2
把灰色盒子的z-index设置为1

    <style>
        .pink{
            width: 300px;
            height: 300px;
            background-color: pink;
            position: absolute;
            top: 1px;
            left: 1px;
            /*此处被修改*/
            z-index: 2;
        }
        .gray{
            width: 300px;
            height: 300px;
            background-color: gray;
            position: absolute;
            top: 10px;
            left: 10px;
            /*此处被修改*/
            z-index: 1;
        }
    </style>

Snipaste_2022-04-27_14-17-35.png
这个时候,粉色盒子的权重比灰色盒子的权重大,就把它覆盖上了。