CSS---三大定位方式（相对，绝对，固定定位）

最新推荐文章于 2024-03-09 16:15:33 发布

qiudonga

最新推荐文章于 2024-03-09 16:15:33 发布

阅读量1.6k

点赞数 3

分类专栏： CSS 前端文章标签： css相对定位 css绝对定位 css固定定位

本文链接：https://blog.csdn.net/qq_42488087/article/details/98051805

版权

前端同时被 2 个专栏收录

11 篇文章 0 订阅

订阅专栏

CSS

2 篇文章 0 订阅

订阅专栏

CSS三大定位方式（相对，绝对，固定定位）

【1】相对定位：相对定位是相对于自身而言的定位

<head>
    <meta charset="UTF-8">
    <style>
        #a{
            /*相对定位,相对于自己左边4px*/
            position: relative;
            left: 4px;
        }
    </style>
</head>
<body>
    <div style="width: 100px; height: 100px; background-color:#8A2BE2; float:left"></div>
    <div id="a" style="width: 100px; height: 100px; background-color:#FFD700; float:left"></div>
</body>

【2】绝对定位：相对于body标签进行定位，也可以理解成相对于浏览器；

<head>
    <meta charset="UTF-8">
    <style>
        #b{
            /*绝对定位*/
            position: absolute;
            right: 50px;
            top: 200px;
        }
    </style>
</head>
<body>
    <div style="margin-left: 100px; background-color: aquamarine;width: 500px;height: 500px;" >
        <div id="b" style="background-color: #8A2BE2;width: 100px;height: 100px;"></div>
        <div style="background-color: royalblue;width: 100px;height: 100px;"></div>
    </div>
</body>

【3】固定定位:相当于固定在浏览器的某个位置，不会随着进度条的改变而改变位置；而相对定位会随着进度条拖动为改变。

<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        #b{
            position: fixed;
            right: 10px;
            top: 200px;
        }
    </style>
</head>
<body>
    <div style="margin-left: 100px; background-color: aquamarine;width: 500px;height: 500px;" >
        <div id="b" style="background-color: #8A2BE2;width: 100px;height: 100px;"></div>
        <div style="background-color: royalblue;width: 100px;height: 100px;"></div>
    </div>
</body>

qiudonga

关注

3
点赞
踩
5

收藏

觉得还不错? 一键收藏
2
评论
CSS---三大定位方式（相对，绝对，固定定位）

CSS三大定位方式（相对，绝对，固定定位）【1】相对定位：相对定位是相对于自身而言的定位<head> <meta charset="UTF-8"> <style> #a{ /*相对定位,相对于自己左边4px*/ position: relative; le...
复制链接

扫一扫