Javascript 如何将div的位置固定到包含背景图像的div的右下角

我有html结构

<div id="bg" class="layer">
<img id="trackmap" src="images/back_2416.jpg" width="1208" height="768" class=" ui-draggable map-icon" usemap="#main-map" data-zoom-image="images/background_zoom.jpg" data-big="images/background_zoom.jpg" style="position: relative; left: -439px; top: -272.6px; margin: 0px; display: inline-block; height: 1327.2px; width: 2088px;">
<div id="nav-text">LOREM IPSUM.</div>
</div>

Css

我只想将

导航文本

固定在右下角。。现在我面临的问题是

轨迹图上有缩放功能。。这会增加图像的高度和宽度。因此文本位于图像的中间。与图像相交。。我曾尝试使用jquery拍摄图像
width-height

我不确定我是否关注您的问题，但听起来您正试图让一个div位于另一个div的右下角，无论其大小。这可以通过将父div
position
设置为您拥有的
relative
，将子div
position
设置为
绝对值来实现。您已经设置了该设置，但是通过将CSS中的
位置设置为
固定
较低来覆盖它。您还需要将
底部设置为
0
，将
右侧设置为
0

这将把子div放置在父div的右下角，然后您就可以摆脱jQuery了。希望这能有所帮助。
好的。。我急着赶公共汽车。。但这是

基本上，您需要使用scrolltop和left参数来执行此操作：

$(".container").on("scroll", function() {
$(".nav-text").css("top", $(this).prop("scrollTop") + 130);
$(".nav-text").css("left", $(this).prop("scrollLeft") + 120);
});

但是先移动卷轴。。很抱歉，我现在要走了。
您可以通过不固定.layer宽度和高度，使用display:inline block；防止div填充整个容器宽度。此时，.layer大小将与图像大小匹配，无论它是什么。
最后，您只需要将文本设置为绝对位置以及底部和右侧属性

.parent{
  display:inline-block;
  position:relative;
}

.children{
  position:absolute;
  bottom:0;
  right:0;
}


这是即使图像大小改变（点击图像）也能正常工作的证明

您提到jquery不起作用，但我看不到code@WillP. 我已经添加了jquery代码。。谢谢你为什么同时设置顶部和底部？顶部使用jQuery，底部使用CSS？另外。。为了让你明白。。您希望的是，即使图像被放大或缩小，导航文本也始终位于右下角？@MohammedR.El-Khoudary您正在打开..正确。。感谢您的回答。我认为如果position:fixed被分配给position:absolute或relative parent的子级，那么它将相对于窗口而不是容器进行固定。它将被固定并保留在窗口底部，这是不期望的。。我想把它放在集装箱里是的。我是说你应该完全移除位置：固定属性。但我可能误解了这个问题。你的缩放功能一定有问题，我们能预览一下这个功能吗？或者它是如何缩放的？让我举个例子，缩放功能可以将高度增加200像素。有三个级别的缩放。。初始图像让我们考虑500 pxt它改变了跟踪轨迹高度吗？还是另一个容器？在我的第二个示例中，单击图像会改变其高度，并且会正常工作。这一定是css属性在某个地方导致了整个事件，如果没有更多的测试材料，恐怕我无法为您提供更多帮助：(
$(".container").on("scroll", function() {
$(".nav-text").css("top", $(this).prop("scrollTop") + 130);
$(".nav-text").css("left", $(this).prop("scrollLeft") + 120);
});

.parent{
  display:inline-block;
  position:relative;
}

.children{
  position:absolute;
  bottom:0;
  right:0;
}