relative相对定位移动以及background-position的坐标

每一个元素都会有属于自己定位系统

今天想总结relative（相对定位）的一些小知识

如果我们设置了一个元素的position属性值为relative那么这个元素就属于相对定位

而我们设置相对定位后，改变了元素的位置，但它并没有脱离文档流，他原来所占的位置还是实实在在存在的

所以并不会引起父元素的高度坍塌，也不会改变周边元素的布局，它仍然属于常规文档流

然而，当我们想要给他的left right bottom top设置属性值已改变它的位置时我们会发现，与我们传统的方向感的方式有点不一样

首先，我们需要明白relative是基于它原来所占位置的左上角为基点，进行移动。如果实在不明白它的移动原理

可以有一种死记硬背的办法，例如我想要让一个基于relative定位下的元素移动100px

那么我们可以写如下代码

每个方向有两种写法，任选其一就好，不过我们一般按照（你要移动的方向的相反方向）：正数px；这样的方式来书写我们的代码

 

个人觉得  我们可以看到以上的示意图来理解，假设有一个元素，我把它向右移动的100px；

这样它就相当于它的左边移动了+100px;而相对它的就右边就移动了-100px；

因为“相对于它的左边left”这个描述是向右边的，而我们本来就向右边移动了，所以我们写left：100px;

而“相对于它的右边right”这个描述是向左边的，但我们的元素却在右边，与right的相对方向相反，所以我们写right：-100px;

用同样的思维，我们可以理解向上下左移动该怎么书写代码

 

以及我们对于icon的设置的时候我们一般会采用background-position的方法来改变bg显示的位置

我们可以这样理解它的坐标

 

我们可以看到这个坐标是向右和向下为正，向上和向左为负

而此时我们有这样一张图，我想截取红色框区域显示

 

所以我们需要进行这样的移动

 

如图，我们将图像左和向上移动一段距离，所以我们就可以书写如下代码

background-position: -xpx  -ypx;  

而图中红色填充区域就是我们移动的路径的面积，我们只需要测出该区域的width和height就可以了

这里我们假设该区域的width为50px，height也为50px;

最终我们的代码为background-position：-50px -50px;

这样我们就可以显示图片中红色边框框选的区域，从而达到显示我们小icon的方法

转载于:https://www.cnblogs.com/stuartrealm/p/10539679.html