Question

我试图找到一个元素的位置以便在该元素之上渲染一个半透明的div时，我对IE7 +有一些奇怪的问题（是的大惊喜）。

当使用DIV或其他布局标记时，jQuery的offset（）和position（）函数以记录和预期的方式工作。使用基于表格的布局时会出现问题。

示例：

<html>
    <body style="margin: 0px;">

    <input type="button" onclick="addlayer('tobeOverlayed')" value="Add Layer" />
    <div style='position: absolute; left: 40px; top: 30px;'>
      <table cellpadding="0" cellspacing="0" style="position: relative; top:15px;">
        <tr>
          <td style="width: 100px;' />
            <td style="width: 400px;'>

              <table cellpadding="0" cellspacing="0" >
                <tr style='height: 70px;">
                  <td style='width: 5px;'></td>
                  <td></td>
                </tr>
                <tr style='height: 70px;">
                  <td style='width: 5px;'></td>
                  <td>
                    <div id="tobeOverlayed" style="background: Red;">Render a translucent layer over me</div>
                  </td>
                </tr>               
              </table>
            </td>
         </tr>
       </table>
    </div>    

    </body>
</html>

当我尝试使用id = tobeOverlayed在div的顶部放置一个图层时 - 偏移或位置都没有给我正确的顶部/左侧值。

我定位的图层必须最终作为它叠加在元素上的元素的兄弟（如果元素的容器滚动，我希望我的叠加层可以滚动它）。

添加叠加后的示例标记：

<html>
    <body style="margin: 0px;">

    <input type="button" onclick="addlayer('tobeOverlayed')" value="Add Layer" />
    <div style='position: absolute; left: 40px; top: 30px;'>
      <table cellpadding="0" cellspacing="0" style="position: relative; top:15px;">
        <tr>
          <td style="width: 100px;' />
          <td style="width: 400px;'>

            <table cellpadding="0" cellspacing="0" >
              <tr style='height: 70px;">
                <td style='width: 5px;'></td>
                <td></td>
              </tr>
              <tr style='height: 70px;">
                <td style='width: 5px;'></td>
                <td>
                  <div id="tobeOverlayed" style="background: Red;">Render a translucent layer over me</div>
                  <div class="Overlay" style="position: absolute; top: 0px; left; 40px" />               
                </td>
              </tr>
             </table>
           </td>
         </tr>
       </table>
    </div>    

    </body>
</html>

顶部/左侧设置是一个示例 - 不要按字面意思理解。

在此示例中调用：

var offsetPos = $("#tobeOverlayed").offset();

给我坐标为left，top =（40,122）

var pos = $("#tobeOverlayed").position();

给我坐标为left，top =（0,7）

这些都不是用于我的叠加的正确的顶部，左边值 - 这不是完全出乎意料的... offset（）给出了相对于文档的坐标 - 这意味着我正在插入我的元素因为兄弟姐妹不是使用权。

然而position（） - 应该给出正确的坐标使用，不应该吗？ 0,7没有正确定位叠加层 - 也许这是一个IE错误，因为容器是一个表格单元格---但叠加层相对于表格元素而不是表格单元格定位。

这是IE的一个已知的怪癖吗？或者我的理解是错误的位置和偏移？

Answer 1

好吧，经过多次咬牙切齿 - 简单的答案是 - 让jQuery的位置函数起作用 - 父容器必须定位在position：absolute或position：relative。

我在jQuery文档中没有看到 - 但在以下问题中找到了对它的引用：CSS absolute positioning elements inside a div

将父容器设置为position：relative

$(element).position()

工作得很好。

为什么jQuery offset（）不能在IE中使用基于表格的布局？

1 个答案: