关于css定位布局问题（固定,相对,绝对）

最新推荐文章于 2024-09-18 00:19:55 发布

imagezx

最新推荐文章于 2024-09-18 00:19:55 发布

阅读量1.7k

点赞数

分类专栏：初级文章标签： css 前端

本文链接：https://blog.csdn.net/imagezx/article/details/127749140

版权

初级专栏收录该内容

10 篇文章 0 订阅

订阅专栏

定位布局是我们平时开发中经常使用到的,关于他的原理和用法,做了下面一些总结。

定位布局以下几种比较常用

固定定位:fixed
相对定位:relative
绝对定位:absolute

1.fixed 固定定位

固定定位的作用就是该元素不会随着浏览器右侧的滚动条而滚动,他是相对于整个浏览器而言的.

对于每个使用fixed定位的元素 top,bottom,left,right四个参数里只需要两个参数就可以确定他的位置

接下来我们来看一个简单的案例：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style type="text/css">
    #divd{
        width: 200px;
        height: 1800px;
        border: 1px solid;
        line-height: 600px;
        text-align: center;
        background-color: antiquewhite;
    }
    #fixed{
        position: fixed;
        width: 160px;
        left: 250px;
        top: 200px;
        height: 30px;
        text-align: center;
        background-color: aqua;
    }

</style>
<body>
    <div id="divd">没有固定的div</div>
    <div id="fixed">固定的div</div>
    
</body>
</html>
页面效果:

当我们滚动右侧滚轮时

会发现经过固定后的元素位置没有发生改变

2.relative相对定位

相对定位顾名思义。第一个谈到的固定布局是相对于浏览器而言的,而相对定位是元素相对于原来位置而偏移的。

举个李子:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style type="text/css">
    #div1{
        width: 100px;
        height: 100px;
        border: 1px solid;
        line-height: 50px;
        text-align: center;
        background-color: antiquewhite;
    }
    #relative{
        width: 100px;
        height: 100px;
        border: 1px solid;
        line-height: 50px;
        text-align: center;
        background-color: aqua;
    }
    #div3{
        width: 100px;
        height: 100px;
        border: 1px solid;
        line-height: 50px;
        text-align: center;
        background-color: antiquewhite;
    }

</style>
<body>
    <div id="div1">div1</div>
    <div id="relative">div2</div>
    <div id="div3">div3</div>
    
</body>
</html>

此时的布局:

当俺们以绝对布局实现时

此时布局为

相对于原来的位置向左偏移了30px

3.absolute绝对定位

绝对定位和固定定位一样是相对于浏览器而言的,不一样的地方在于它浮于其他元素的上方了,它前后左右的元素会认为它不存在.

举个例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style type="text/css">
    #div1{
        width: 100px;
        height: 100px;
        border: 1px solid;
        line-height: 50px;
        text-align: center;
        background-color: antiquewhite;
    }
    #absolute{
        /* position: relative; */
        top: 60px;
        width: 100px;
        height: 100px;
        border: 1px solid;
        line-height: 50px;
        text-align: center;
        background-color: aqua;
    }
    

</style>
<body>
    <div id="div1">div1</div>
    <div id="absolute">div2</div>
    
</body>
</html>

此时他是这样滴: