jquery - position element on another with jQuery UI position

Question

Heyho again, I have two elements and want to position one of it relative to the second one :-) I found and would like to use "jquery ui .position()" for that. Here is what I got:

<div id="testparent">Parent</div>
<div id="testchild">Child</div>
#testparent{
    position: absolute;
   margin:100px auto auto auto;
   width:300px;
   height:120px;
   background:lime; 
}
#testchild{
    margin:auto;
    width:60px;
    height:90px;
    background:yellow;
}
$('#testchild').position({
    of: $('#testparent'),
    my: "left top",
    at: "left bottom",
    offset: "0 3"
});

I want the testchild to be positioned above/under the testparent. The problem is, that I do NOT want to position it horizontally relative to the parent but just vertically!! Is that possible :-)??

Answer 1

my仅使用and选项是不可能的at，因为指定单个值将同时应用于leftand top。

但是，您可以在using选项中指定一个函数，该函数将被调用以执行定位。如果您忽略该left属性而只更新top，您可以实现您想要的：

$("#testchild").position({
    my: "left top",
    at: "left bottom",
    of: "#testparent",
    offset: "0 3",
    using: function(props) {
        $(this).css("top", props.top);
    }
});