定位（上）

2024-01-11 17:10:58

定位简介

定位作为网页布局的最后一种手段，常在标准流及浮动无法实现相应效果时使用。下面依次介绍静态定位，相对定位，绝对定位。

属性名：position:

定位需要配合left，right,top，bottom来使用，如：

position: absolute;
bottom: 0px;
left:0px;

静态定位

position: static;

静态定位极为标准流，属于默认值，无法通过left等值偏移，常说的定位中不包括静态定位

相对定位

position: relative;

特点：相对与自己本身位置移动，需要配合方位属性实现移动，并且不会脱离标准流

没有脱标示例：

绿色正方形没有因为红色的移动二补上去，这说明了红色正方形没有脱离标准流

代码如下

    <title>Document</title>
    <style>
        .box1{
            width: 200px;
            height: 200px;
            background-color: black;
        }

        .box2{
            width: 200px;
            height: 200px;
            background-color: rgb(104, 19, 19);
            position: relative;
            left: 400px;
        }

        .box3{
            width: 200px;
            height: 200px;
            background-color: rgb(10, 231, 21);
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
</body>

常用与搭配子绝父相使用

绝对定位

position: absolute;

特点：相对于非静态的父元素定位，并且在标准流中会脱标

代码

    <title>Document</title>
    <style>
        .box1{
            width: 200px;
            height: 200px;
            background-color: black;
        }

        .box2{
            width: 200px;
            height: 200px;
            background-color: rgb(104, 19, 19);
            position: absolute;
            left: 400px;
        }

        .box3{
            width: 200px;
            height: 200px;
            background-color: rgb(10, 231, 21);
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
</body>
</html>

常用与搭配子绝父相使用

子绝父相

含义：子元素为绝对定位，父元素设置相对定位

好处：对页面布局影响最小

应用场景：

使元素水平垂直居中

<!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>
        .box1{
            width: 500px;
            height: 500px;
            background-color: black;
            position: relative;
        }

        .box2{
            width: 750px;
            height: 350px;
            background-color: rgb(104, 19, 19);
            margin: 0 auto;
        }

        .box3{
            width: 150px;
            height: 150px;
            background-color: rgb(10, 231, 21);
            position: absolute;
            /* 垂直水平居中原理：显示box3左/上移动box1的一半，
            再让它向右/下移动自身的一半 */
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%);
        }
    </style>
</head>
<body>
    <div class="box1">
        <div class="box2">
            <!-- box3的首个父元素为box2，但是他却相对box1移动，
            这体现了绝对定位是相对于非静态的父元素定位的特点 -->
            <div class="box3"></div>
        </div>
    </div>
</body>
</html>

码农公寓