在 iPad 上绝对定位不会将元素设置在所需位置

Positioning absolute on iPad does not set the element on the desired position

本文关键字：元素 设置 位置 iPad 定位      更新时间：2023-09-26

嗨，我似乎对iPad上的绝对定位有一些问题。这是我的问题。我正在尝试创建的是一个工具提示，当用户点击图像时，工具提示将出现。

这是我到目前为止所做的：

var div = createTooltip(toElement);
$(toElement).click(function () {
     showTooltipNow(toElement, div);
});
function createTooltip(toElement, div){
 var div = document.createElement('DIV');
   div.style.zIndex = 100000;
   div.style.visibility = 'hidden';
   div.style.position = 'absolute';
   div.style.left = 0;
   div.style.top = 0;
   document.body.appendChild(div);
}
 function showTooltipNow(toElement, div) {
    $(div).addClass('tbxtooltip-close');
    var positionedElement = $(div);
    var toElem = $(toElement);
    positionedElement.css({ top: toElem.position().top, left: toElem.position().left, position: "absolute" })

    alert("Top Position " +positionedElement.position().top + " Left Position " +positionedElement.position().left);
    alert("Top ToElement Position " + toElem.position().top + " Left ToElement Position " +toElem.position().left)
    div.style.visibility = 'visible';
}
When I initialize this I get the following readings from the alerts:
Top Position:  363.375  Left Position 300
Top ToElement Position 485  Left ToElement Position 400

我期望发生的是定位元素获得与单击的元素相同的位置，但如您所见，这不会发生。

我首先假设位置是从应用程序中的另一个位置设置的，但如果我不调用此行： 

    positionedElement.css({ top: toElem.position().top, left: toElem.position().left, position: "absolute" })

在 showTooltipNow 函数中，元素位于顶部：0左：0因为它是在创建工具提示函数中设置的。

我还应该提到，在所有桌面浏览器上，这都可以正常工作 IE、火狐、Safari 和 Chrome 没有这种行为，并且元素是 se 在所需的位置。

有谁知道为什么我的元素没有设置为正确的位置？

我已经对您的代码进行了一些小的安排，并在iPad（Safari和Chorme）上对其进行了测试，它工作正常。

var div = createTooltip();
document.getElementById("toElement").addEventListener("click",function () {
    showTooltipNow(this, div);
});
function createTooltip(){
    var div = document.createElement('DIV');
    div.style.zIndex = 100000;
    div.style.visibility = 'hidden';
    div.style.position = 'absolute';
    div.style.left = "0px";
    div.style.top = "0px";
    div.style.width = "100px";
    div.style.height = "100px";
    div.style.backgroundColor = "green";
    document.body.appendChild(div);
    return div
}
function showTooltipNow(toElement, div) {
    //$(div).addClass('tbxtooltip-close');
    var positionedElement = div;
    var toElem = toElement;
    positionedElement.style.cssText += position:absolute;top:"+toElem.style.top+";left:"+toElem.style.left+";";
    alert("Top Position " +positionedElement.style.top + " Left Position " +positionedElement.style.left);
    alert("Top ToElement Position " + toElem.style.top + " Left ToElement Position "+positionedElement.style.left);
    div.style.visibility = 'visible';
}

这是一个小提琴。希望这有帮助。

相关文章：