Question

我试图在元素A的顶部设置元素B的绝对位置。我有

var left = $('#elementA').offset().left;

var top  = $('#elementA').offset().top;


---------------------------
|    -----------           |    
|   |o          |          |        
|   |           |          |
|   |           |          |
|   |           |          |    
|    -----------           |
|--------------------------

o表示我的elementA。

我想将元素B放在与元素A相同的位置

$('elementB').css({ position:'absolute',
            top:top,
            left:left}) 


---------------------------
|    -----------          | 
|   |o          |         |     
|   |  b        |         |
|   |           |         |
|   |           |         | 
|    -----------          |
|--------------------------
b means my element b

但结果如上所述。

如果我设置

$('elementB').css({ position:'absolute',
            top:0,
            left:0})

它会起作用。但我有许多不同的元素B和元素A，我不能为所有元素使用0。

任何人都可以帮我这个吗？非常感谢！

Answer 1

您可以使用jQuery UI Position插件来定位相对于任何其他元素的任何元素。请参阅：http://docs.jquery.com/UI/Position

在你的情况下，它将是：

$('#elementB').position({
  my: 'left top',
  at: 'left top',
  of: '#elementA'
});

另外我认为将'px'添加到css属性的值是一个好习惯，例如：

$('...').css({
    left: 100 + 'px'
});

如上所述，您应始终考虑相对于彼此的元素处置。如果父元素是“定位”，则子元素将不是相对于窗口而是相对于其父元素定位。如果你想要更多的灵活性，你可以从元素A中取出元素B（让它们成为兄弟姐妹）。

Answer 2

函数offset（）将为您提供窗口中元素的偏移量。你需要的是elementA在其容器中的相对偏移量。

尝试使用position（）而不是offset（）

基于另一个例子： http://jsfiddle.net/dcFXj/

Answer 3

当一个元素是另一个元素的子元素时，绝对定位对于窗口来说并不是绝对的，它相对于它的父是绝对的。如果您希望div的左上角与其父母的左上角完美匹配，那么您需要它top和{{1距离它的父级正好是零像素。它只是绝对的，因为它忽略了可能会将其移出原位的所有其他物品。

Here's a demonstration of that in action

当B是A的孩子时，对于B需要与A对齐的每种情况，只需将其左侧和上方设置为0。

绝对的立场问题

3 个答案: