background-position: calc(100% - 8px);

如果我明白你的要求你会这样做;

你有一个名为#main-container的DIV容器和其中的。my-element。用这个来开始吧;

#main-container { 
  position:relative;
}
/*To make the element absolute - floats above all else within the parent container do this.*/
.my-element {
  position:absolute;
  top:0;
  right:10px;
}

/*To make the element apart of elements, something tangible that affects the position of other elements on the same level within the parent then do this;*/
.my-element {
  float:right;
  margin-right:10px;
}

顺便说一下，如果您在页面中引用较低级别的元素，最好使用类(我假设您因此而更改了上面的名称)。

最合适的答案是background-position的新四值语法，但在所有浏览器都支持它之前，最好的方法是按照以下顺序组合之前的响应:

background: url(image.png) no-repeat 97% center; /* default, Android, Sf < 6 */
background-position: -webkit-calc(100% - 10px) center; /* Sf 6 */
background-position: right 10px center; /* Cr 25+, FF 13+, IE 9+, Op 10.5+ */

是的!好吧，把背景图片从浏览器的右边定位成0px，而不是左边-我使用:

background-position: 100% 0px;

这将适用于大多数现代浏览器…除了IE(浏览器支持)。尽管该页面列出了支持>= IE9，但我的测试并不同意这一点。

你可以像这样使用calc() css3属性;

.class_name {
    background-position: calc(100% - 10px) 50%;
}

对我来说，这是最干净、最合乎逻辑的方式来实现向右的边缘。我还使用了border-right: 10px solid transparent;IE。

最简单的解决方案是使用百分比。这并不是您想要的答案，因为您要求的是像素精度，但如果您只是需要在右边缘和图像之间有一些填充，那么给出99%的位置通常就足够了。

代码:

/* aligns image to the vertical center and horizontal right of its container with a small amount of padding between the right edge */
div.middleleft {
  background: url("/images/source.jpg") 99% center no-repeat;
}