CSS中position定位

最新推荐文章于 2024-04-03 09:47:29 发布

安静的对折

最新推荐文章于 2024-04-03 09:47:29 发布

阅读量438

点赞数

分类专栏： CSS 文章标签： css html 前端定位 position

本文链接：https://blog.csdn.net/k491022087/article/details/52389398

版权

CSS 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

在我们布局的时候，我们会经常使用到position属性，它规定了元素定位的类型，元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行确定。下面说一下它常用的三种定位机制

1、 absolute 绝对定位

下面代码有三个盒子，每个盒子的宽高都是100px，给第三个盒子设置绝对定位，并距离body左边框20px，body顶部边框20px，看一下效果会是什么样子。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        div {
            width: 100px;
            height: 100px;
        }
        .one {
            background: red;
        }
        .two {
            background: green;
        }
        .three {
            background: blue;
            position: absolute; /*绝对定位*/
            left: 20px;
            top: 20px;
        }
    </style>
</head>
<body>
<div class="one">1</div>
<div class="two">2</div>
<div class="three">3</div>
</body>
</html>

在浏览器上运行后，我们可以发现第三个盒子在第一、二个盒子上面，距离body的左边框以及顶部边框的距离都是20px，由此我们可以发现设置绝对定位后的元素脱离标准流，在页面中不占位置。

2、 relative 相对定位

同样是上面的三个盒子，给第二个盒子设置相对定位，left和top都设置20px

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        div {
            width: 100px;
            height: 100px;
        }
        .one {
            background: red;
        }
        .two {
            position: relative;/*相对定位*/
            left: 20px;
            top: 20px;
            background: green;
        }
        .three {
            background: blue;
        }
    </style>
</head>
<body>
<div class="one">1</div>
<div class="two">2</div>
<div class="three">3</div>
</body>
</html>

运行后，发现第二个盒子偏移的距离是相对自己原来的位置进行的偏移，且第三个盒子并没有移动上去，所以，设置相对定位后的元素是不脱离标准流，并且在页面中占据位置

3、 fixed 固定定位

固定定位这个属性，相信大家在网页上看小说的时候，会经常遇到，当我们滚动页面滚动条的时候，不论我们是向下还是向上滚动，页面的左右两边总是在固定的位置有广告栏，这里就运用了固定定位。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .one {
            width: 50px;
            height: 50px;
            background: red;
            position: fixed;/*相对定位*/
            left: 50px;
            top: 50px;
        }
        .two {
            height: 3000px;
            width: 100%;
            background: pink;
        }
    </style>
</head>
<body>
<div class="one">1</div>
<div class="two">2</div>
</body>

不论我们怎么滚动滚动条，第一个盒子总是在相对于浏览器的边框的左50px，上50px的位置，并且第一个盒子在第二个盒子的上面，因此设置固定定位后的元素脱离了标准流，且不占据位置。