css 固定定位相对定位绝对定位

最新推荐文章于 2025-05-12 10:53:06 发布

sun_smile1

最新推荐文章于 2025-05-12 10:53:06 发布

阅读量477

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/sun_smile1/article/details/71244244

本文详细介绍了CSS中的三种定位方式：固定定位、相对定位和绝对定位。包括每种定位方式的特点及应用示例，帮助读者理解如何在网页布局中合理运用这些定位技术。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一.固定定位

固定定位是固定在浏览器的某一视框位置。

<style>
    div{
        height: 1000px;
    }
    #back{
        width: 100px;
        height: 60px;
        text-align: center;
        line-height: 60px;
        background-color: #585858;
        position: fixed;
        bottom: 20px;
        right: 20px;
        /*显示的优先级*/
        z-index: 1000;
    }
</style>

解释：

position: fixed;相对于浏览器的窗口进行定位。
z-index: 1000;显示的优先级，值越大越优先。但一般会有最大值限制。

<body>
<div>

    <div id="back">
        返回顶部

    </div>
</div>
</body>

二.相对定位
采用相对定位的元素，会相对它原来的位置进行定位，发生偏移时，元素原始占用的空间不会被其他
元素占用。
<style>
    #left,#center,#right{
        float: left;
    }
    #left{
        width: 200px;
        height: 200px;
        background-color: #42668f;
    }
    #center{
        width: 200px;
        height: 200px;
        background-color: #f2ad0a;
        position: relative;
        top: 20px;
        left: 20px;
    }
    #right{
        width: 200px;
        height: 200px;
        background-color: aqua;
    }
</style>
解释：
position: relative;用于相对定位。实例center模块偏移后距原来位置向下20px，向右20px.
<body>
<div>
    <div id="left"></div>
    <div id="center"></div>
    <div id="right"></div>
</div>
</body>

三.绝对定位
采用绝对定位的元素，会寻找离它最近的采用了定位的父元素，并以它为坐标进行定位
如果所有的父元素都没有使用定位，则以body为坐标进行定位，并且，元素占用的空间
会被其他元素占用。
<style>
    #left,#center,#right{
        float: left;
    }
    #left{
        width: 200px;
        height: 200px;
        background-color: #42668f;
    }
    #center{
        width: 200px;
        height: 200px;
        background-color: #f2ad0a；
        position: absolute;
        top: 20px;
        left: 20px;
    }
    #right{
        width: 200px;
        height: 200px;
        background-color: aqua;
    }
</style>
解释：
position: absolute;用于绝对定位。
<body><div>
    <div id="left"></div>
    <div id="center"></div>
    <div id="right"></div>
     </div>
</body>
解释：
position: absolute;用于绝对定位。
<body><div>
    <div id="left"></div>
    <div id="center"></div>
    <div id="right"></div>
    </div>
</body>