I have an absolute positioned element that's already anchored to its direct parent. My current design spec requires a couple of these elements to right align to the very end of the ancestor container. I'm trying to find these coordinates in jQuery but no matter what I try I just can't seem to get the right calculations. My first thought was to set the child's offset to the total width of the topmost container and subtract the child's width but since there's padding in both it's kind of thrown off. What am I missing here? Is there a better way to accomplish this? Unfortunately I have to keep the parent and child position properties.
$('.child').offset({
top: $('.parent').offset().top / 2,
left: $('.container').outerWidth() - $('.child').outerWidth()
});
#container {
border: 1px solid black;
padding: 10px;
}
.parent {
position: relative;
}
.child {
position: absolute;
padding: 10px;
top: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div id="container"><nav id="menu"><div class="parent">
Parent<span class="child">Child</span></div></nav></div>