javascript - 使用绝对将元素放置在其他元素内。元素是兄弟姐妹

Question

我正在尝试使用绝对定位放置一个元素“内部”，与另一个 div“外部”的右上角齐平。“内部”元素不是“外部”的子元素。因此，我需要使用 js 查找“外部”的定位并使用它。

但是，结果并不完全正确：

编辑：我无法重置 body div 的边距/填充/相对值。体内还有其他元素。

http://jsfiddle.net/BZBSF/1/

#wrapper{background:red;
         width:100px;
         height:100px;}

#inner{
    position:absolute;
    background:green;
    width:50px;
    height:100px;
    margin:0;padding:0;
}

#body{position:relative;}

<div id = "body">
    <div id = "wrapper"></div>
    <div id = "inner"></div>    
</div>

var rect = document.getElementById("wrapper").getBoundingClientRect();

$("#inner").css({ 'top': String($(window).scrollTop()+rect.top)+"px" });

width_inner = $("#inner").width();

$("#inner").css({ 'left': String($(window).scrollLeft()+rect.right-width_inner)+"px" });

Answer 1

这是你想要的吗？

var rect = $('#wrapper');

$("#inner").css({ 'top': rect.position().top+"px" });

$("#inner").css({ 'left': (rect.position().left + rect.width() - $('#inner').width())+"px" });

http://jsfiddle.net/araSp/2/

如果您需要担心填充/边框，您可以使用：

.innerWidth()

.outerWidth()

Answer 2

在 body 元素上设置边距和填充。

body{
    margin: 0;
    padding: 0;    
}

小提琴

或者如果没有具体的身体原因：相对；删除它。

小提琴

推荐第二种。

Answer 3

只需在顶部快速重置：

* {
    margin:0;
    padding:0;
}

小提琴

注意：这是一个快速重置。您可能想要使用其他重置样式表。

Answer 4

您应该删除 body 标记处的相对位置。

 $(document).ready(function() {

    $('#inner').css({
        'position': 'absolute',
        'top': $('#wrapper').offset().top,
        'left': $('#wrapper').offset().left + $('#wrapper').width() - $('#inner').width()
    });

});

演示：

http://jsfiddle.net/4uSeV/