第五章-盒子定位

本章目标

盒子定位（重点、难点）
盒子堆叠顺序（重点）

一、盒子定位

1.1定位属性

position：设置盒子定位
- static：默认，没有定位
- relative：相对定位
- absolute：绝对定位
- fixed：固定定位
定位关键字：left、right、top、bottom
- 正值往关键字相反方向偏移

1.2静态定位（static）

设置方式为position: static;静态定位的盒子是标准流状态，用于取消定位。
静态定位的盒子处于网页的最底层，并且top、left、bottom、right、z-index属性都不起作用。

1.3相对定位（relative）

它是标准的文档流，当设置好定位，它的位置的内容即使飞走了，原位置空白依然保留；
起始点以自己为基准点，进行定位偏移；

代码演示：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .dv1 {
            width: 200px;
            height: 40px;
            background: pink;
            position: relative;
            left: 200px;
            top: 40px;
        }

        .dv2 {
            width: 200px;
            height: 40px;
            background: green;
            position: relative;
        }

        .dv3 {
            width: 200px;
            height: 40px;
            background: orange;
            position: relative;
        }
    </style>
</head>

<body>
<div class="dv1">这是一个div1</div>
<div class="dv2">这是一个div2</div>
<div class="dv3">这是一个div3</div>
</body>

</html>

1.4绝对定位（absolute）

它脱离了标准的文档流，当设置好定位，它位置和内容一起飞走，原位置不会保留；

1.4.1没有父级元素的绝对定位

没有父级元素没有设置定位起始点以游览器为基准点，进行定位偏移；

代码演示：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .dv1 {
            width: 200px;
            height: 40px;
            background: pink;
            position: absolute;
            left: 200px;
            top: 40px;
        }

        .dv2 {
            width: 200px;
            height: 40px;
            background: green;
            position: relative;
        }

        .dv3 {
            width: 200px;
            height: 40px;
            background: orange;
            position: relative;
        }
    </style>
</head>

<body>
<div class="dv1">这是一个div1</div>
<div class="dv2">这是一个div2</div>
<div class="dv3">这是一个div3</div>
</body>

</html>

1.4.2有父级元素的绝对定位

有父级元素并且设置定位起始点以父级元素为基准点，进行定位偏移；

代码演示：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .dv1 {
            width: 200px;
            height: 40px;
            background: pink;
            position: relative;
        }

        .dv2 {
            width: 200px;
            height: 40px;
            background: green;
            position: absolute;
            left: 200px;
            top: 40px;
        }

        .dv3 {
            width: 200px;
            height: 40px;
            background: orange;
            position: relative;
        }

        .dv {
            width: 200px;
            height: 40px;
            background: tomato;
            position: relative;
        }
    </style>
</head>

<body>
    <div class="dv1">这是一个div1</div>
    <div class="dv">
        div2父级元素
        <div class="dv2">这是一个div2</div>
    </div>
    <div class="dv3">这是一个div3</div>
</body>

</html>

二、盒子堆叠顺序

1.1什么是盒子层级堆叠顺序？

在css中，z-index的意思为“层级，层空间层叠等级”，可以指定一个元素的堆叠顺序，用于确认元素在当前层叠上下文中的层叠级别，拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面

1.2层级堆叠顺序属性

z-index：设置盒子堆叠顺序
设置z-index数值越大，该盒子显示在最上面，可以写负数值

代码演示：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .dv1 {
            width: 200px;
            height: 200px;
            background: pink;
            position: absolute;
            z-index: 10;
        }

        .dv2 {
            width: 200px;
            height: 200px;
            background: green;
            position: absolute;
            left: 20px;
            top: 20px;
        }

        .dv3 {
            width: 200px;
            height: 200px;
            background: orange;
            position: absolute;
            left: 40px;
            top: 40px;
        }
    </style>
</head>

<body>
    <div class="dv1">这是一个div1</div>
    <div class="dv2">这是一个div2</div>
    <div class="dv3">这是一个div3</div>
</body>

</html>