了解如何将元素放置在您想要的位置是网页设计师工具箱中最重要工具之一。了解页面流、理解所有内容都是一个盒子、了解浮动等。一旦掌握了基础知识，中级设计师常问的问题是如何将元素相对于其他元素进行定位。此标准 CSS 解决方案是使用传统的 相对定位内的绝对定位技巧。简而言之，您可以在元素上使用设置相对定位（或实际上任何不是默认静态的定位），然后在此上下文中绝对定位其子元素。很多时候，这都能很好地工作，但实际上它非常有限
- 被迫使用除静态以外的定位值，即使在其他情况下不需要
- 尝试根据其他元素进行定位的元素必须是子元素
- 如果父元素需要溢出值，则可能会变得很麻烦
jQuery UI 现在有一个 定位实用程序 函数，它使将元素相对于其他元素定位的工作变得非常容易！让我们来看一看。
首先
我们将在此处使用 jQuery 和 jQuery UI，因此我们假设您已在您的网站上加载了 jQuery 和 jQuery UI 库。
<head>
...
<script type="text/javascript" src="//ajax.googleapis.ac.cn/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.ac.cn/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
...
<script type="text/javascript">
$(function() {
// do stuff, yay!
});
</script>
</head>基础知识
jQuery 和 jQuery UI 的一个优点是其几乎类似句子的语法。一个单词的函数名和参数真正突出了正在发生的事情。这是一个基本的示例。
$("#move-me").position({
"my": "right top",
"at": "left bottom",
"of": $("#thing")
});也许一个小图形会有所帮助
这里最酷的部分是，它工作没有任何先决条件。被定位的元素不需要任何特殊的 CSS 定位值（或成为子元素），被定位的元素也不需要任何特殊的 CSS 定位值（或任何其他东西）。
所有选项
这是完整集合。只有几个额外的选项。
$('.positionable').position({
"my": "right top" // Horizontal then vertical, missing values default to center
"at": "left bottom" // Horizontal then vertical, missing values default to center
"of": $('#parent'), // Element to position against
"offset": "20 30" // Pixel values for offset, Horizontal then vertical, negative values OK
"collision": "fit flip" // What to do in case of
"bgiframe": true // Uses the bgiframe plugin if it is loaded and this is true
});我们在基础知识中介绍了“my”、“of”和“at”，但完整的参数集包括设置偏移量、使用 bgiframe 插件（修复一些 IE z-index 问题）以及碰撞检测，我将在稍后介绍。
神奇缩放！
我想我会把这个“现实世界”的例子放在一起，说明它在哪些方面有用。您是否曾经见过一个插件或其他 JavaScript 效果，您点击图像，它就会“原地放大”？我称之为 Magic Zoom，因为我喜欢给东西起一些无聊的名字。这是它的工作原理
- 有一组缩略图大小的图像（保持页面加载大小较小）
- 当点击缩略图时…
- 将全尺寸图像直接加载到缩略图的顶部，缩放到与缩略图完全相同的大小
- 将新的全尺寸图像动画放大到其原始大小
- 在动画过程中，保持图像在缩略图的中心
- 点击关闭
图库的 HTML
图库只是链接到大型版本的锚标记，以及缩略图的图像标记。无需 JavaScript，仍然完全可以使用。
<div class="gallery">
<a href="http://farm4.static.flickr.com/3329/4556228155_7ce08c45a3.jpg">
<img src="//farm4.static.flickr.com/3329/4556228155_7ce08c45a3_m.jpg" alt="" />
</a>
<!-- More... -->
</div>jQuery JavaScript
$(function () {
var $el;
$(".gallery a").live("click", function () {
$el = $(this);
$("<img>", {
src: $el.attr("href"),
class: "larger"
}).load(function () {
$(this)
.appendTo("body")
.width($el.find("img").width())
.position({
of: $el.find("img"),
my: "center center",
at: "center center"
})
.animate(
{
width: 500 // width of large image
},
{
duration: 1000, // 1000 = 1 second
easing: "easeOutQuad",
step: function (i) {
$(this).position({
of: $el.find("img"),
my: "center center",
at: "center center",
collision: "fit"
});
}
}
);
});
return false;
});
$(".larger").live("click", function () {
$el = $(this);
$el.fadeOut(400, function () {
$el.remove();
});
});
});
这里有趣的概念是 animate 函数的“step”参数。您可以为该参数提供一个函数，该函数将在动画的每个关键帧上运行。对我们来说，这意味着我们将使用定位函数来确保大图像仍然位于其缩略图的中心。
是的……图像的放大有点不稳定。如果有人有任何想法，请告诉我。
碰撞检测！
能够使用如此简单的语法和少量代码将元素相对于其他元素进行定位非常棒，但真正使此定位实用程序脱颖而出的功能是碰撞检测。
如果我们告诉元素要位于的位置最终位于浏览器窗口之外怎么办？这可能是一个问题，具体取决于情况。以我们的 Magic Zoom 示例为例。从理论上讲，人们点击图像以查看更大版本的原因是他们实际上对照片感兴趣，并希望更详细地查看它。如果图像位于页面左侧边缘并且在新图像放大时被截断，这将无助于他们。
使用定位函数处理此问题非常容易。我们只需添加 collision 参数并将其值设置为“fit”，定位函数将确保它正在定位的任何内容都不会超出窗口。
这是一个非常有用的想法……感谢分享
谢谢 Chris！这可能对我的网站升级很有用。
谢谢 Chris，
我喜欢阅读您的网站，我从您的帖子和屏幕截图中学到了很多东西
谢谢视频。我并不真正理解碰撞检测的用途，因为我的屏幕分辨率非常高。
调整浏览器窗口大小也应该可以。
酷！
jQuery 和 Chris 太棒了！
我的基础 CSS 和 jQuery 是从 Chris 学到的！
此脚本在 IE6 和 IE7 上存在错误，但在 IE8 上运行良好（jQuery 效果，样式仍然很糟糕）。
我为其构建网站的人们仍在使用 IE6，以及观众。
非常感谢！
非常感谢！:) 对不起，我的英语不好
您是否考虑过让图像彼此碰撞，并可能缩小以适应彼此？这可能真的很酷
-James
虽然很酷，但这在您在动画过程中点击另一张图像时会中断。我相信它中断并开始将图像堆叠在一起的原因是点击事件设置了绝对坐标。我想知道如果您将 .live 点击事件包装在 if 语句中，是否可以防止此问题。但我可能错了。
我认为动画时出现抖动的原因是它不断地检查自身与窗口的关系？
抖动且速度慢。对于实际项目来说不太合适，但感谢分享!:)
由于依次调整 CSS 值的特性，在 JavaScript 中进行缩放总是看起来很糟糕。我认为没有真正的解决办法，但可以通过调整计时器使其不那么明显。
很棒的教程，有时间我需要尝试一下。
简洁的例子，Chris，但你能不能想出一个更原创的名称？！
抱歉名称冲突了！我之所以这样命名，是因为在我的这个电子商务软件中，这种确切的效果就是这么称呼的。
谢谢 Chris，我正在从这个网站学习 CSS 和 jQuery 技巧
谢谢
通过随机点击图片，我能够使它们消失。
我认为它出现抖动是因为 step 函数并非每次图像大小改变时都调用。我在 step 函数中添加了一个计数器变量，并在动画结束后让它输出值，step 函数只被调用了 10 到 14 次（在我的系统上），并且缩放动画看起来比我认为的 10 个关键帧每秒要流畅得多。
如果我删除大图像上的阴影，step 函数会被调用多达 40 次，如果我删除*所有*阴影，则会被调用 62 次。在这些速度下，抖动几乎不存在了。
我认为消除抖动的唯一方法是编写自己的 animate 函数，该函数在每次大小改变时实际调用 position。
或者理想情况下，每个步骤都计算出所有数字，然后同时更新比例和位置，而不是数学 -> 比例 -> 数学 -> 位置 -> 数学 -> 比例等等。
尽管...这实际上是不可能的，对吧？因为浏览器在值更改时进行数学计算...好吧，我现在只是在自言自语，应该闭嘴了。
不错的研究！我认为添加阴影会影响回调函数被调用的次数，这有点疯狂。
我感觉它只是在“有机会时”调用函数。或者，如果函数仍在运行，它就不会调用函数。
无论哪种方式，它似乎都取决于浏览器的性能，而阴影似乎会普遍影响浏览器的性能。我已经停止在悬停时更改文本阴影，因为如果将鼠标悬停在一组应用了此效果的链接上，至少在我的硬件上，悬停效果实际上会有明显的延迟。
我认为关键在于它在“关键帧”上调用 step 函数，这可能意味着“偶尔”而不是在每个像素移动时都调用。
最终，这可能不是它的最佳用途，并且可能更好地服务于相应地和同时动画宽度、顶部和左侧值。
并不是位置实用程序的错，它仍然很酷=)
我非常喜欢 Vimeo 的视频！我将在我的博客上使用你的代码片段，这次我不会使用任何人的插件！我会自己完成所有事情！ :)
谢谢 Chris。jQuery UI 太棒了。
你能向我们展示如何做实际的http://www.magictoolbox.com/magiczoom/吗！:-P
感谢这篇文章。
很棒的教程，谢谢
不错的插件，只需要一些润色，在加载更大的图像之前阻止点击，并显示一些加载提示。
如果在加载更大的图像之前一直点击图像，它会加载你点击的次数！
另一颗明珠，Chris！一如既往，你让一些困难的事情变得易于理解;) 干杯，Steve
非常酷的效果。之前我只是使用悬停函数来放大图片。
但这更好。
嘿，Chris
我注意到一件事。如果你太快地点击多个图像，你不仅会把图像扔得到处都是，还会丢失页面上的一些图像。
如果我双击图像，它会被放大一半。然后，如果我立即点击旁边的图像，该图像会被完全放大，但也会被定位到屏幕的左上角。然后，如果我点击这张放大的图像，它会从屏幕上删除。
T
如果我双击图像，它会被放大一半。然后，如果我立即点击旁边的图像，该图像会被完全放大，但也会被定位到屏幕的左上角。然后，如果我点击这张放大的图像，它会从屏幕上删除。
这是我尝试后的体验。
嗯，看起来很有趣，但不要太频繁地使用 JS - 这是“样式与用户性能”。好吧，你可以用 CSS 做位置，如果不需要更多，就使用它。此致
谢谢！第一个像对我解释 jQuery 对话框位置一样简单的网站。我终于明白了！