Question

如何将div放在和相对于fullscreen-img？我希望div相对于图像位于相同的位置，即使调整窗口大小。

修改

现在几乎可以使用了。我将div放在外部div而不是图像上。问题是外部div需要具有指定的大小（％或px），否则relative-div不知道在哪里定位。当我在外部div上使用100％x 100％时，它与图像的高度不同。图像是全屏的，在调整窗口大小时应该可以使用。

<div id="outer-div" style="position:absolute; width:100%; height:100%;">
    <img  id="fullscreen-image" src="image.jpg" style="width:100%;">
    <div id="relative-div" style="position:relative; background-color:#000; bottom:20%; left:50%; width:30px; height:30px;"></div>
</div>

Answer 1

这在使用absolute定位 -

时有效

请检查小提琴 - https://jsfiddle.net/afelixj/5rjgetq0/1/

如果img不是absolute，这将有效，但应该有position:relative的warapping div来查找top和left位置图像。

Answer 2

请检查小提琴 - https://jsfiddle.net/afelixj/5rjgetq0/3/

使用不同的height测试图像。

Answer 3

我让它工作了（我将div放在外部div而不是图像上）：

<div id="outer-div" style="position:absolute; width:100%; height:100%; overflow:hidden;">
    <img id="fullscreen-image" src="image.jpg" style="width:100%; z-index:-10; bottom:0; left:0;">
    <div style="background-color:#000; bottom:20%; left:50%; width:30px; height:30px; position:relative;"></div>
</div>

jQuery（更改＆＃39; outer-div＆＃39;当全屏图像＆＃39;更改大小时）的高度：

$(document).ready(function(){ //Runs once after document ready
    $('#outer-div').css({'height':$('#fullscreen-image').height()});
});
$(window).resize(function() { //Runs when window is resized
    $('#outer-div').css({'height':$('#fullscreen-image').height()});
});

我知道这不是最佳解决方案，所以如果您想出一个仅限css的解决方案，欢迎您发布。

Div放置在fullscreen-img

3 个答案: