CSS是能实现的，不过有点麻烦。大概是这么实现：
在HTML中为需要“向右偏移15%+22px”的div加上两个辅助定位的div：
<div id="outer"><div id="theMiddel">
<div id="div"></div> <!-- 目的：此div向偏移15%+22px -->
</div>
</div>
2. 在CSS中，首先使最外层的<div id="outer">使用相对定位position:relative，占据15%的父元素的宽度(即width: 15%)，高度与目标<div id="div">一样；
3. 在CSS中，使以下两个div
<div id="theMiddel"><div id="div"></div> <!-- 目的：此div向偏移15%+22px -->
</div>
假设目标<div id="div">的宽度是50px。
<div id="theMiddel">使用绝对定位，定位到最上边最右边，这时候目标<div id="div">的位置就是：向右偏移15%减去目标<div id="div">的宽度（15% - 50xp）。
4. 目标<div id="div">使用绝对定位，然后right: -（50 + 22）px。这就是向右偏移15%+22px。
以下代码详细实现
向右偏移15%+22px.html 文件代码清单如下：
<!doctype html><html langj="zh">
<head>
<meta charset="utf-8">
<title>向右偏移15%+22px</title>
<link rel="stylesheet" href="marginRight.css">
</head>
<body>
<p>CSS绝对定位：向右偏移15%+22px</p>
<div id="outer">
<div id="theMiddel">
<div id="div"></div>
</div>
</div>
</body>
</html>
marginRight.css 文件代码清单如下：
#outer {position: relative
width: 15% /* 用宽度15%定位到15%位置 */
height: 50px /* 这行可以去掉，现在是为了看清偏移情况 */
background: rgb(220, 220, 220)/* 这行可以去掉，现在是为了看清偏移情况 */
}
#theMiddel { /* 中间部分使目标div移动到15%位置的最右边 */
position: absolute
top: 0
right: 0
}
#div {
position: absolute
right: -72px
/* 偏移量是：目标div的宽度加上22px。如果目标div宽度变化，这行自己相应变化 */
width: 50px
/* 目标div的宽度，自己设定，如果变化，上一行的负偏移量也要改变 */
height: 50px
background: rgb(18, 48, 168)
}
1、新建html文件。
2、创建两个div，并赋予id。
3、为两个div设置宽高和背景，并设置左右浮动。
4、预览效果如图。
5、创建第三个div。
6、为第三个div设置宽高和背景。
7、预览效果如图。
注意事项：
随着HTML的成长，为了满足页面设计者的要求，HTML添加了很多显示功能。但是随着这些功能的增加，HTML变的越来越杂乱，而且HTML页面也越来越臃肿。于是CSS便诞生了。
首先你要知道要截取的图片在整张图片中的偏移量以及大小。然后：
<div style="width:wwwpxheight:hhhpxbackground:url(图片url) no-repeat -lllpx -tttpx"></div>
其中www是要截取的小图片的宽度，hhh则是高度；
lll是小图片的左边在大图片的偏移量，ttt则是上边的偏移量。
请注意负号不能省略！
