使用relative position css实现网页元素定位

发布时间：2023-05-12

一、relative position 是什么

relative position 与 static position 最大的区别是可以通过 top、right、bottom、left 来设置其相对位置，而 static position 是默认的正常布局方式。 当元素使用 relative position 时，它的位置偏移量相对于它所在的正常位置而定；如果没有提供 top、right、bottom 和 left 属性，则为 0。 请看下面这个例子：

<style>
    #example {
        position: relative;
        left: 30px;
        top: 50px;
        border: 1px solid black;
        padding: 10px;
    }
</style>
<div id="example">
    <p>使用 relative position css 实现网页元素定位</p>
</div>

二、使用 relative position 实现网页元素定位的步骤

相信大家在开发过程中都会遇到各种布局问题，而使用 relative position 可以很好的解决一些元素的位置定位问题，下面是使用 relative position 实现网页元素定位的步骤：

  1. 给需要定位的元素设置 position: relative;
  2. 使用 top、right、bottom、left 属性调整元素的位置 请看下面这个例子：
<style>
    .container {
        width: 400px;
        height: 400px;
        background-color: #ddd;
        position: relative;
    }
    .box {
        position: relative;
        top: 50px;
        left: 50px;
        width: 100px;
        height: 100px;
        background-color: orange;
    }
</style>
<div class="container">
    <div class="box"></div>
</div>

三、relative position 和 absolute position 的区别

我们在定位 HTML 元素时，可以使用两种方法：absolute position 和 relative position，为什么要使用这两种 position 呢？它们各有什么特点和优缺点呢？

1. absolute position

使用 absolute position，元素会脱离正常流，完全根据位置属性来定位。当包含该元素的 parent element 设置 position: relative 时，absolute position 的元素会相对于 parent element 定位，否则它会相对于文档定位。 请看下面这个例子：

<style>
    #parent {
        position: relative;
        height: 300px;
        border: 1px solid #000;
        padding: 10px;
    }
    #box {
        position: absolute;
        left: 50px;
        top: 50px;
        width: 100px;
        height: 100px;
        background-color: orange;
    }
</style>
<div id="parent">
    <div id="box"></div>
</div>

2. relative position

使用 relative position，元素还在正常流中，也就是说它仍然占用原来的空间，只是通过调整其位置属性来改变它的位置，而绝对定位元素与之不同，它会完全脱离文档流。 请看下面这个例子：

<style>
    #parent {
        position: relative;
        height: 300px;
        border: 1px solid #000;
        padding: 10px;
    }
    #box {
        position: relative;
        top: 50px;
        left: 50px;
        width: 100px;
        height: 100px;
        background-color: orange;
    }
</style>
<div id="parent">
    <div id="box"></div>
</div>

四、小结

本文介绍了使用 relative position css 实现网页元素定位的方法和步骤，同时也介绍了相对位置与绝对位置的区别，非常适合需要用到定位功能的前端开发工程师。

推荐文章