csdn学习笔记-定位

最新推荐文章于 2025-03-31 12:06:59 发布

wayaan

最新推荐文章于 2025-03-31 12:06:59 发布

阅读量278

点赞数

CC 4.0 BY-SA版权

分类专栏：前端学习笔记文章标签：学习

本文链接：https://blog.youkuaiyun.com/xiaobai_learning/article/details/127237375

前端学习笔记专栏收录该内容

8 篇文章

订阅专栏

CSS定位装饰-01-定位-作用和使用步骤_哔哩哔哩_bilibili

一、常见网页布局方式

1.标准流

块级独占一行；行内块水平布局

2.浮动

让原本垂直变为水平

3.定位

自由摆放元素，一般用于盒子模型

4.常用场景

a.盒子层叠

b.让盒子始终固定在某个位置

二、使用方法

1.属性名：position

2.设置偏移值：

去两个即可（就近原则）

三、相对定位

1.特点：

a.占有原来的位置（！没有脱离标准流（托标）

！相对于原位置去定位）

b.不改变标签原有显示特点

c.如果left,right,top,bottom 都有以left和top为准

<!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>
        .bgc{
            position: relative;
            top: 100px;
            left: 100px;

            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>

</head>
<body>
    
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <div class="bgc">111</div>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</div>
    <a href="#">测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</a>
    
</body>
</html>

四、绝对定位

1.定位：

有父类相对于父类，没有父类相对于窗口

2.特点：

a.托标、不占位

b.改变标签显示特点：具备行内块（一行共存，宽高生效）

<!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>
        .bgc{
            position: relative;
            top: 100px;
            left: 100px;
            width: 200px;
            height: 200px;
            background-color: pink;
        }

        .spot{
            position: absolute;
            top: 180px;
            left: 90px;
            width: 5px;
            height: 5px;
            background-color: rgb(122, 89, 89);
        }
    </style>

</head>
<body>
    
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <div class="bgc">x
        <div class="spot"> 00</div>
    </div>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</div>
    <a href="#">测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</a>
    
</body>
</html>

五、子绝父相

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>
        .father{
            position: relative;
            top: 100px;
            left: 100px;

            width: 400px;
            height: 400px;
            background-color: pink;
        }

        .son{
            position: absolute;
            top: 340px;
            left: 340px;

            width: 50px;
            height: 50px;
            background-color: rgb(122, 89, 89);
        }
    </style>

</head>
<body>
    
    <div class="father">

        <div class="son"></div>

    </div>

</html>