position定位静态定位/绝对定位/相对定位

1.静态定位static:按照标准流进行布局

bash 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        .main{
            width: 500px;
            height: 200px;
            border: 1px solid black;
        }
        .son{
            /* 
            position
            static:静态定位为position的默认值,表示盒子按照标准流进行布局
            absolute:以父盒子为基准
            relative:相当于太自己便宜
            */
            position: static;
            width: 200px;
            height: 120px;
            border: 1px solid black;
           
        }
        
    </style>

</head>


<body>
    <div class="main">
        <div class="son">静态定位</div>
    </div>
</body>
</html>

2.绝对定位absolute:以父结点为基准进行定位

bash 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        .main{
            width: 500px;
            height: 200px;
            border: 1px solid black;
        }
        .son{
            /* 
            position
            static:静态定位为position的默认值,表示盒子按照标准流进行布局
            absolute:以父盒子为基准,进行定位
            relative:相当于太自己便宜
            */
            position: absolute;
            width: 200px;
            height: 120px;
            border: 1px solid black;
            top: 30px;
            left: 30px;
        }
        
    </style>

</head>


<body>
    <div class="main">
        <div class="son">绝对定位</div>
    </div>
</body>
</html>

3.相对定位relative:相对于原来的标准位置进行偏移

bash 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        div{
            border: 1px solid black;
        }
        .main{
            width: 500px;
            height: 200px;
            border: 1px solid black;
        }
        .son{
            /* 
            position
            static:静态定位为position的默认值,表示盒子按照标准流进行布局
            absolute:以父盒子为基准,进行定位
            relative:相当于太自己便宜
            */
            position: relative;
            width: 200px;
            height: 120px;
            border: 1px solid black;
            top: 30px;
            left: 30px;
        }
        
    </style>

</head>


<body>
    <div class="main">
        <div>普通盒子</div>
        <div>1</div>
        <div class="son">相对定位</div>
    </div>
</body>
</html>

此时将position换成absolute效果如下

对比一下绝对定位和相对定位

相关推荐
一个处女座的程序猿O(∩_∩)O1 小时前
Vue-Loader 深度解析:原理、使用与最佳实践
前端·javascript·vue.js
还是大剑师兰特2 小时前
TypeScript 面试题及详细答案 100题 (91-100)-- 工程实践与框架集成
前端·javascript·typescript·1024程序员节
可触的未来,发芽的智生2 小时前
触摸未来2025-10-25:蓝图绘制
javascript·python·神经网络·程序人生·自然语言处理
用户47949283569152 小时前
typeof null === 'object':JavaScript 最古老的 bug 为何 30 年无法修复?
前端·javascript·面试
非凡ghost2 小时前
By Click Downloader(下载各种在线视频) 多语便携版
前端·javascript·后端
非凡ghost3 小时前
VisualBoyAdvance-M(GBA模拟器) 中文绿色版
前端·javascript·后端
非凡ghost3 小时前
K-Lite Mega/FULL Codec Pack(视频解码器)
前端·javascript·后端
麦麦大数据3 小时前
F034 vue+neo4j 体育知识图谱系统|体育文献知识图谱vue+flask知识图谱管理+d3.js可视化
javascript·vue.js·知识图谱·neo4j·文献·体育·知识图谱管理
非凡ghost3 小时前
ProcessKO(查杀隐藏危险进程)多语便携版
前端·javascript·后端
守正出琦3 小时前
带代码示例的 HTML 标签实操手册
前端·html