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

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

相关推荐
树叶会结冰26 分钟前
HTML语义化:当网页会说话
前端·html
星秀日2 小时前
JavaWeb--Ajax
前端·javascript·ajax
嫂子的姐夫3 小时前
10-七麦js扣代码
前端·javascript·爬虫·python·node.js·网络爬虫
Komorebi_99993 小时前
Vue3 + TypeScript provide/inject 小白学习笔记
前端·javascript·vue.js
少吃一口都不行3 小时前
脚手架学习
前端·javascript·学习
地方地方3 小时前
手写JavaScript 深拷贝
前端·javascript
明月与玄武4 小时前
浅谈 富文本编辑器
前端·javascript·vue.js
小帅说java4 小时前
【Spring开发】SpringCloud服务端基础框架第9篇:3.Gateway服务网关【附代码文档】
javascript·spring
千码君20164 小时前
React Native:关于react自定义css属性的位置
css·react native·react.js·前端框架·ecmascript·组件嵌套
FuckPatience4 小时前
Vue 与.Net Core WebApi交互时路由初探
前端·javascript·vue.js