CSS基础之定位

拄着拐儿唱儿歌

已于 2022-04-25 22:47:35 修改

阅读量399

点赞数

分类专栏： # HTML+CSS 文章标签： css html css3 前端

于 2022-04-15 15:39:14 首次发布

本文链接：https://blog.csdn.net/qq_43615148/article/details/124192937

版权

HTML+CSS 专栏收录该内容

17 篇文章 2 订阅

订阅专栏

CSS基础之定位

定位就是告诉某个标签去哪个地方。

一、静态定位：

静态定位其实就是浏览器默认的布局方式，也就是标准流，网页默认情况下就是静态定位的

代码：position:static

二、相对定位：

相对定位是相对于自己原来的位置，其实有点像margin。

代码：positon:relative

注意：需要配合方位实现移动，也就是top、bottom、left、right方位。在页面中没有脱离标准流，他原来所占的位置还在。

举个栗子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="GB 2312">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .position{
            position: relative;
            top: 100px;
            left: 50px;
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div class="position"> </div>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
</body>
</html>

效果：
在这里插入图片描述

三、绝对定位

绝对定位会从内往外找有定位的父级，然后相对于有定位的父级进行定位，
如果没有默认根据浏览器可视区域进行移动。

注意：绝对定位已经脱标，如果把标准流当作第一平行宇宙，那么使用了绝对定位的标签就已经飞出三界了。而上面所说的相对定位可以想象成灵魂出窍但是身体本身还在地面打坐。而且使用绝对定位后，标签会成为行内块模式。

举个栗子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="GB 2312">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .position{
            position: absolute;
            top: 100px;
            left: 50px;
            /* width: 200px; */
            height: 200px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div class="position">adsfasdfasdfasdfsd </div>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
</body>
</html>

效果如下：这里div根据内容展开的，不给内容就没有宽度了，已经成为了行内块标签。

在这里插入图片描述

四、一般搭配方式：子绝父相（子元素使用绝对定位，父元素使用相对定位）

但是如果父元素已经有了定位的话，就不要去修改父元素的定位方式，不要脱裤子放屁。

子绝父相也可以实现居中效果：

让标签来到父标签的中心线，然后再水平向左垂直向上移动自身半个身位就行了。
话不多说直接上代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="GB 2312">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
   
        .father{
            position: relative;
            width: 600px;
            height: 600px;
            background-color: green;
        }
        .son{
            position: absolute;
            left: 50%;
            top: 50%;
            //水平缩回50%，垂直缩回50%身位
            transform: translate(-50% ,-50%);
            width: 200px;
            height: 200px;
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son"></div>
    </div>
</body>
</html>