代码之家 › 专栏 › 技术社区 › user984003

使用绝对值将元素放置在其他元素内。元素是同级元素

css jquery javascript

user984003 · 技术社区 · 12 年前

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

然而,结果并不完全正确:

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

#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" });

4 回复 | 直到 12 年前

reggaemahn 12 年前

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

body{
    margin: 0;
    padding: 0;    
}

FIDDLE

或者,如果身体没有具体原因:相对;去掉它。

FIDDLE

建议使用第二种。

Ben Jackson 12 年前

这是你想要的吗?

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()

Nikhil Patel 12 年前

只需在顶部快速重置:

* {
    margin:0;
    padding:0;
}

Fiddle

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

Patrick Leijser 12 年前

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

 $(document).ready(function() {

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

});

演示:

http://jsfiddle.net/4uSeV/