您的位置:

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

一、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实现网页元素定位的方法和步骤,同时也介绍了相对位置与绝对位置的区别,非常适合需要用到定位功能的前端开发工程师。