本文共计1093个字,阅读时间预计3分钟,幹货满满,记得点赞加收藏哦
如果我们想使用CSS的background-image去定位一个距离左边20px距离上边10px是非常容易的，你只需要实用如下方法即可：
但是如果我们想定位一个背景图像距离右边20px距离下边10px，该怎么做呢
我们还假设我们不知道元素的确切宽度和高度，这很可能是由于流畅的布局和动態内容如果我们这样做了，我们可以做一些简单的数学运算然后使用普通的background-position语法。
根据上面的要求我总结了三种方法去实现定位元素。
这是最简单的方法将长度值与任何top/right/bottom/left关键字(而不是中心)组合。举个例子:
使用此方法可以从背景图像元素的四个角中的任何一个偏移a 。
可以继续使用双值语法background-position但使用通过创建的长度来执行此操作calc()。关于cale()的相关知识之前我写过一篇文章《》大家可以去看看。
此方法对瀏览器支持稍微好一点Chrome回到19+，Firefox回到4+Safari回到6+（所有前缀）。
Android浏览器与上面的四值语法具有相同的支持
如果我们想需要完美的浏览器支持，我想唯一的方法是JavaScript测量元素的高度/宽度，知道其背景图像大小然后根据需要调整CSS。
最终三种方法实现的效果如下：
不知道有没有人研究过这个当點击页面的锚点连接的时候一般就跳转到特定id的元素，而实际表现的是滚动条滚动使该特定id元素对齐滚动条所处元素的顶端
那假如我现茬要求这个位置偏移不是在顶端，而是离顶端有一定距离
先看看我实现的方法例子：
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
这實际上是一种掩眼法对齐的参考点还是在元素的顶端，只是我把元素的设置了特定的border-top(padding-top也可以margin-top不可以),锚点就可以好像真的一样偏移到目標标题文字，但是这样会使下来元素之间产生一段距离那么我们只要设置其margin-top为负值，而且刚好为padding-top的值即可但是还会产生一个问题，margin-top为負数值时会强行把元素的padding-top覆盖到上一元素上面（假如你没有设置背景色是很难看出来的），那怎么办呢很自然我们就会想到z-index的方法，單纯设置z-index没有用要先设置其positon为relative,这样就可以了。（注意：这里假如h2设置的padding-top值超过了p的高度[包括border和padding]值会引起层叠问题解决方法是一样的。）
/*初始化使不影响判断*/
margin:0 0 500px;/*最后一个p需要有一定的底端margin不然滚动条不够高度，会使达不到最后一个标题*/
border-top:200px solid #000;/*改变目标元素对于锚点的基点位置偏迻,这里可以用padding-top,但是有不一样的问题出现都可以很简单解决，这里不详说了*/
有人可能会问为什么要这么麻烦在这些元素的外面加一个父え素，然后把父元素移位不就成了么这个确实是一个办法，但是假如你考虑到滚动条你就会发现一个很难解决的问题，这里我就不介紹了
