javascript - 使用绝对将元素放在其他元素内。元素是 sibling

Question

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

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

编辑:我无法重置正文 div 的边距/填充/相对值。 body 中还有其他元素。

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

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

body{
    margin: 0;
    padding: 0;    
}

FIDDLE

或者如果没有具体原因body:relative;删除它。

FIDDLE

推荐第二种