屏幕html上div中的图像位置

Question

我正在构建一个停靠式菜单。我在底部有 4 个缩略图，我想弹出一个 div。一切都很好，除了一件事，当我试图将弹出 div 定位在缩略图上方时，我无法弄清楚如何获取图像的位置。我尝试了 offset 和 $(element).width 但两者都返回了底部（主）div（包含缩略图）的位置。我该怎么办？

底部分区

<div id=menu>
    <a href="http://www.google.com">
        <img id="fest" src="icon/fest.png" style="position: relative;"height="150"/>
    </a>
    <a href="http://www.google.com">
    <img id="music" src="icon/music.png" style="position: relative;"height="150"/>
    </a>
    <a href="http://www.google.com">
        <img id="diaf" src="icon/diaf.png" style="position: relative;"height="150"/>
    </a>
    <a href="http://www.google.com">
        <img id="show" src="icon/show.png" style="position: relative;"height="150"/>
    </a>
</div>

弹出式div

<div id="diaf_div" style="display: none; background-color: rgba(50, 50, 50, 0.5); border-radius: 25px; border: 2px;">
    <a href="http://www.google.com">
        <img id="diaf_1" src="icon/diafora/apokries.png" style=" height: 80px; width: 80px;" title="Αποκριάτικες Εκδηλώσεις"/>
    </a></br>
    <a href="http://www.facebook.com">
        <img id="diaf_2" src="icon/diafora/docs.png" style=" height: 80px; width: 80px;" title="Aegean Docs"/>
    </a></br>
    <a href="http://www.hiddenlol.com">
        <img id="diaf_3" src="icon/diafora/grad.png" style=" height: 80px; width: 80px;" title="Ορκομωσίες"/>
    </a></br>
    <a href="http://www.hiddenlol.com">
        <img id="diaf_4" src="icon/diafora/valentine.png" style=" height: 80px; width: 80px;" title="Εκδήλωση Αγίου Βαλεντίνου"/>
    </a></br>
</div>

和缩略图 javascript

//Menu      
var myElement = document.getElementById('diaf');
var position = getPosition(myElement);
$("#diaf").mouseover(function () {
    kathar();
    $("#diaf").css({
        opacity: 1
    });
    $("#diaf").animate({
        width: ($(window).width() * 0.06),
        height: ($(window).width() * 0.06),
        opacity: 1
    }, 50);
    $("#diaf_div").fadeIn(50);
});
$("#diaf").mouseout(function () {
    $("#diaf").css({
        opacity: 1
    });
    $("#diaf").animate({
        width: ($(window).width() * itx),
        height: ($(window).width() * itx),
        opacity: 1
    }, 50);
});

//Items

var
diaf_height = 400;
document.getElementById('diaf_div').style.height = diaf_height;
document.getElementById('diaf_div').style.position = "absolute";
document.getElementById('diaf_div').style.left = position.x;

document.getElementById('diaf_div').style.top = $(window).height() - ($(window).width() * itx) - diaf_height;

$("#diaf_div").mouseleave(function () {
    kathar();
});
$("#diaf_1").mouseover(function () {
    $("#diaf_1").css({
        opacity: 1
    });
    $("#diaf_1").attr("src", "icon/diafora/apokries1.png")

});
$("#diaf_1").mouseout(function () {
    $("#diaf_1").css({
        opacity: 1
    });
    $("#diaf_1").attr("src", "icon/diafora/apokries.png")
});
$("image2").mouseover(function () {

});

谢谢你，对不起我的英语，我不是母语人士。

Answer 1

取决于您的布局： 如果可能，将弹出窗口创建为缩略图的子项。将缩略图设置为

position:relative;

和弹出窗口

position:absolute;
bottom:100%;

在此处查看动态创建的示例： https://jsfiddle.net/svArtist/ck25bgtn/

如果您希望弹出窗口的水平中心与缩略图的水平中心相匹配，这也可以在 CSS 中完成： https://jsfiddle.net/svArtist/pt741nt7/

.popup{
    position:absolute;
    bottom:100%;
    left:0%;
    right:0%;
    margin: 0 auto;
}