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

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

相关推荐
祝余呀5 分钟前
HTML初学者第三天
前端·html
就爱瞎逛21 分钟前
TailWind CSS Intellisense 插件在VSCode 上不生效
前端·css·vscode·tailwind
柚子81624 分钟前
sibling-index:我用这个画时钟表盘
前端·css
前端小巷子1 小时前
Web开发中的文件上传
前端·javascript·面试
上单带刀不带妹2 小时前
手写 Vue 中虚拟 DOM 到真实 DOM 的完整过程
开发语言·前端·javascript·vue.js·前端框架
前端风云志2 小时前
typescript结构化类型应用两例
javascript
gnip3 小时前
总结一期正则表达式
javascript·正则表达式
爱分享的程序员3 小时前
前端面试专栏-算法篇:18. 查找算法(二分查找、哈希查找)
前端·javascript·node.js
翻滚吧键盘3 小时前
vue 条件渲染(v-if v-else-if v-else v-show)
前端·javascript·vue.js
你这个年龄怎么睡得着的3 小时前
为什么 JavaScript 中 'str' 不是对象,却能调用方法?
前端·javascript·面试