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效果如下

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

相关推荐
爱吃的强哥7 分钟前
vue3 使用 vite 管理多个项目,实现各子项目独立运行,独立打包
前端·javascript·vue.js
涵信16 分钟前
第十节:性能优化高频题-虚拟DOM与Diff算法优化
javascript·vue.js·性能优化
拖孩23 分钟前
【Nova UI】十一、组件库中 Icon 组件的测试、使用与全局注册全攻略
前端·javascript·vue.js·ui·sass
天天扭码1 小时前
深入解析 JavaScript 中的每一类函数:从语法到对比,全面掌握适用场景
前端·javascript·面试
kooboo china.1 小时前
Tailwind CSS 实战:基于 Kooboo 构建企业官网页面(一)
前端·css·编辑器
凉豆菌2 小时前
在html中如何创建vue自定义组件(以自定义文件上传组件为例,vue2+elementUI)
vue.js·elementui·html
北上ing2 小时前
同一页面下动态加载内容的两种方式:AJAX与iframe
前端·javascript·ajax
纪元A梦2 小时前
华为OD机试真题——推荐多样性(2025A卷:200分)Java/python/JavaScript/C++/C语言/GO六种最佳实现
java·javascript·c++·python·华为od·go·华为od机试题
小墨宝3 小时前
js 生成pdf 并上传文件
前端·javascript·pdf
www_pp_4 小时前
# 构建词汇表:自然语言处理中的关键步骤
前端·javascript·自然语言处理·easyui