&nbs p;
MDN上对 <position> 值解释是：一种 CSS 数据类型，2D坐标空间，用来设置相对 盒子 的坐标。
我们经常使用的 background-pos IT ion 的值就是 <position> 值，最近刚介绍的 object-position 的值也是 <position> 值。
<position> 值支持1~4个值，可以是具体数值，也可以是百分比，也可以是 left , top , right , center , bottom 关键字。可参考下图经典示意：
如果偏移没有相应的关键字，则会被认为是 center , 因此， background-position:top center 可以直接写作 background-position:top 。
如果同时出现3个值或4个值，则表示可以指定偏移的相对位置，这是CSS3新特性，现代浏览器下才支持。包括：Ch rom e 25+, Firefox 13+, IE 9+, opera 10.5+, Safari/iOS 7+ .
例如：
background-position: right 40px bottom 20px;
效果则是：
您可以狠狠地点击这里：background-position 4值效果Demo
哇哦，IE9都支持， 应该 可以愉快地使用了吧！抱歉，我要泼点冷水。貌似And ROI d的支持有些糟糕，据说：Android 4.4才支持，Android 4.0~4.2都不支持。因此，我们在实现此类效果的时候，可能还需要留一手，如下，使用 calc 计算：
background-position: calc(100% - 40px) calc(100% -20px);
使用 calc 计算总体来说兼容性好 一点 ，但是，IE9浏览器下，根据caniuse的说法，会让IE9浏览器奔溃。
因此，实际使用还需要根据场景分别或hack处理。
百分比单位
background-position 中的百分比单位是个很有 意思 的东西。其表现与CSS中其他的百分比单位表现都不一样。
例如，一个图片：
img { position: absolute; left: 100%; } 一定是在父容器外部。但是，在 <position> 值中，却是不一样的表现。
我们可以看下这个ifr am e示意：
其中，上面的妹子是 background-position 百分比，下面的50%透明的妹子是 left 百分比，可以看出两者的定位差异。
这就是为何 background-position:100% 100% 是定位在容器 右下角 的 原因 。
那 <position> 值对应的容器坐标位置该如何计算呢？
实际上是有一个公式的：
positionX = (容器的 宽 度-图片的宽度) * PE rcentX; positionY = (容器的高度-图片的高度) * percentY;
因此，当 background-position:100% 100% 时候，实际定位值就是容器 尺寸 和 图片尺寸 的差异，于是，就有了右下角定位效果。
有个这个公式，我们也能理解百分比负值的一些表现了，比方说你 觉得 下面两行CSS对应图片的表现是？
background-position: -50% -50%; object-position: -50% -50%
是不是觉得应该是定位在容器的左上角，同时有部分图片超出容器左上角隐藏不可见，就类似上面这个截图：
但是，实际上，不好意思，可能是会下面这种效果（此截图来自这里，您可以狠狠地点击）：
接近于下面CSS的效果：
background-position: 40px 10px;
深受传统百分比定位迷惑的我们可能一时间会想不通，明明是个负值百分比定位，怎么会是一个正值效果呢？这不科学啊！
但是，我们套用 <position> 百分比值计算公式，就豁然开朗了！
因为图片的尺寸大于容器尺寸，所以：
(容器的宽度-图片的宽度) * -50% 的结果是个 正值 ； (容器的高度-图片的高度) * -50% 的结果也是个 正值 ;所以…… 恩！相信大家都应该懂了！
深更 半 夜，行为仓促，错误在所难免，欢迎指正，欢迎补充，感谢阅读！
（本篇完）
觉得可用，就经常来吧！ 欢迎评论哦！ html5教程 ，巧夺天工，精雕玉琢。小宝典献丑了！
总结
以上是 为你收集整理的 html5教程-CSS <position>值简介理解background百分比定位 全部内容，希望文章能够帮你解决 html5教程-CSS <position>值简介理解background百分比定位 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。
查看更多关于html5教程-CSS <position>值简介理解background百分比定位的详细内容...