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

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

相关推荐
打不着的大喇叭41 分钟前
uniapp的光标跟随和打字机效果
前端·javascript·uni-app
Sun_light1 小时前
6个你必须掌握的「React Hooks」实用技巧✨
前端·javascript·react.js
爱学习的茄子1 小时前
深度解析JavaScript中的call方法实现:从原理到手写实现的完整指南
前端·javascript·面试
呆呆的心1 小时前
揭秘 CSS 伪元素:不用加标签也能玩转出花的界面技巧 ✨
前端·css·html
百锦再1 小时前
重新学习Vue中的按键监听和鼠标监听
javascript·vue.js·vue·计算机外设·click·up·down
优雅永不过时_v1 小时前
基于vite适用于 vue和 react 的Three.js低代码与Ai结合编辑器
前端·javascript
WildBlue1 小时前
🧊 HTML5 王者对象 Blob - 二进制世界的魔法沙漏
前端·javascript·html
啷咯哩咯啷1 小时前
Vue3构建低代码表单设计器
前端·javascript·vue.js
凌览1 小时前
斩获 27k Star,一款开源的网站统计工具
前端·javascript·后端
爱学习的小学渣1 小时前
Css: flex布局+趣味Demo
css