Question

嗨，我似乎对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

我期望发生的是定位元素获得与被点击元素相同的位置，但正如您所看到的那样，这并不是很好。

我首先假设该位置是从aplication中的另一个位置设置的，但如果我没有调用此行：

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

showTooltipNow 函数中的元素位于顶部：0为left：0，因为它在createTooltip函数中设置。

我还应该提一下，在所有桌面浏览器上，这种方法都能正常工作IE，Firefox，Safari和Chrome没有这种行为，而且这个元素是理想的位置。

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

Answer 1

我已经对你的代码进行了一些小的安排，并在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';
}

Here is a fiddle exaple。希望这有帮助。

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

1 个答案: