css中的相对定位咋用的

admin 轻心小站 关注 LV.19 运营
发表于前端技术学习版块 css,教程

CSS中的相对定位是一种非常常用的布局方式,它可以让我们对一个元素进行微调和定位。相对定位与其它定位方式的不同之处在于,它会相对于自身的初始位置进行偏移。下面,我们来看一下相对定位的用法。首先,我们需

CSS中的相对定位是一种非常常用的布局方式,它可以让我们对一个元素进行微调和定位。相对定位与其它定位方式的不同之处在于,它会相对于自身的初始位置进行偏移。

下面,我们来看一下相对定位的用法。首先,我们需要在CSS中给需要定位的元素添加一个相对定位的属性:

  position: relative; 

接下来,我们可以再添加一个top、bottom、left、right的属性,从而决定元素相对于它原本的位置偏移多少像素:

  position: relative;
        top: 20px;
        left: -10px; 

这样,我们就让元素往了上方移动了20个像素,并往左偏移了10个像素。需要注意的是,相对定位不会影响其它元素的位置,而只能在自身上进行微调。

另外,我们可以利用相对定位的特性,让两个元素相对于自身进行定位:

  div1 {
            position: relative;
        }

        div2 {
            position: relative;
            left: 20px;
        } 

这样,我们就让div2元素相对于div1的位置向右移动了20个像素。

需要注意的是,相对定位的元素会在其原本所在的空间内保留位置,因此,如果它的移动会与其它元素发生重叠,就需要用到其它的布局方式。

总的来说,相对定位是CSS中非常有用的一种定位方式,它可以让我们更加灵活地控制页面布局。

文章说明:

本文原创发布于探乎站长论坛,未经许可,禁止转载。

题图来自Unsplash,基于CC0协议

该文观点仅代表作者本人,探乎站长论坛平台仅提供信息存储空间服务。

评论列表 评论
发布评论

评论: css中的相对定位咋用的

粉丝

0

关注

0

收藏

0

已有0次打赏