30-解决方案

6.8.2　解决方案

获取现有元素的宽度、高度和偏移量，用这些值相应地定位新元素。

假定有如下HTML：

<style>
#foo {
　　 width: 300px;
　　 height: 100px;
　　 border: 1px solid red;
　　 padding: 5px;
}
#tooltip {
　　 border: 1px solid black;
　　 padding: 5px;
　　 background-color: #fff;
</style>
<div id="foo">An existing element</div>

下面的代码将为现有的元素添加一个兄弟元素，但是定位在元素“内部”，顶部距离现有元素顶部10像素，左侧距离现有元素左侧10像素，宽度比现有元素短20像素：

jQuery(document).ready(function() {
　　 var $foo = jQuery('#foo'),
　　　　　fooPosition = $foo.position(),
　　　　　$tooltip = $('<div id="tooltip">A new element</div>').insertAfter($foo);
　　 $tooltip.css({
　　　　　position : 'absolute',
　　　　　top : fooPosition.top + 10,
　　　　　left : fooPosition.left + 10,
　　　　　width : $foo.width() - 20
　　 });
});

如果你希望在页面的其他地方添加一个新元素——也就是说，如果你不希望它是现有元素的兄弟元素——可以调整代码查看原始元素的偏移量而非位置：

jQuery(document).ready(function() {
　　 var $foo = jQuery('#foo'),
　　　　　fooOffset = $foo.offset(),
　　　　　$tooltip = $('<div id="tooltip">A new element</div>').appendTo('body');
　　 $tooltip.css({
　　　　　position : 'absolute',
　　　　　top : fooOffset.top + 10,
　　　　　left : fooOffset.left + ($foo.width() / 2),
　　　　　width : $foo.width() - 20
　　 });
});