Question

我试图放置一个元素，“内部”，使用绝对定位冲洗另一个div的右上角，“外部”。 “内部”元素不是“外部”的孩子。因此，我需要使用js查找“外部”的定位并使用它。

然而，它并不是很正确：

编辑：我不可能重置body div的margin / padding / relative。身体内还有其他元素。

#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元素上设置margin和padding。

body{
    margin: 0;
    padding: 0;    
}

FIDDLE

或者如果身体没有特定原因：相对;删除它。

FIDDLE

建议使用第二个。

Answer 3

只需在顶部快速重置：

* {
    margin:0;
    padding:0;
}

Fiddle

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

Answer 4

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

 $(document).ready(function() {

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

});

DEMO：

http://jsfiddle.net/4uSeV/

使用absolute将元素放在其他元素中。元素是兄弟姐妹

4 个答案: