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

Question

我有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>

  

Jquery的

 var windowHeight = $("#trackmap").height();
 var windowWidth = $("#trackmap").width();
 var text_height=((windowHeight)-(100));
 $("#nav-text").css("top",windowHeight);

  

的CSS

.layer {
position: absolute;
width: 1208px;
height: 768px;
}
#nav-text{
z-index: 200;
color: white;
position: absolute;
font-size: 10px;
margin-left: 715px;
width: 310px;
height: 10px;
position: fixed;
bottom: 5px;}

我只是想将nav-text修正到右下方..现在我面临的问题是trackmap上的theres缩放功能..这增加了图像的高度和宽度。 .so文本介于图像之间..与图像相关..我尝试使用 jquery 拍摄图像width height但不知何故它不起作用

Answer 1

我不确定我是否在这里关注你的问题，但听起来你正试图将div放在另一个div的右下角，无论它的大小是多少。这可以通过将父div position设置为relative，将子position设置为absolute来完成。您有该设置，但通过将CSS中的position设置为fixed来覆盖它。您还需要将bottom设置为0，将right设置为0。

这会将子div定位到父div的右下角。然后你可以摆脱你的jQuery。希望这会有所帮助。

Answer 2

好的..我赶紧赶上公共汽车..但这里是a fiddle that illustrates the idea ..

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

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

但首先移动卷轴..抱歉我现在需要走了..

Answer 3

你可以通过不使用display：inline-block修复.layer宽度和高度来实现这一点。防止div填满整个容器的宽度。此时，.layer大小将匹配图像大小，无论它是什么。 最后，您只需要将文本设置为绝对位置以及底部和右侧属性。

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

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

Here is the fiddle explaining

即使图像尺寸发生变化，也可以使用此证据（单击图像）。

Fiddle 2