1

在一个position:relative元素内box，我有

  1. 一个绝对定位的元素parentattop:0有几个 staticp和h1..h6inside。这些可能都有不同的边距/填充值。
  2. 一些绝对定位的元素，其中元素名称和内容与上面列表 #1 中的元素之一完全匹配。

目标是设置第二个元素的 y 值，使其与 1 中的集合中的对应元素完全重叠。

我采用了这种方法（使用闭包，但实际上可以使用任何东西），从content用于生成列表 #1 的元素数组开始：

goog.dom.removeChildren(parent);
for (var i=0; i<content.length; i++) {
    offsets.push(parent.offsetHeight);
    goog.dom.appendChild(parent, content[i]);
}
return offsets;

然后，使用来自的值offsets：

var matchedElm = source[i].cloneNode(true);
goog.style.setStyle(matchedElm, {"top": offsets[i] + "px"});
goog.dom.appendChild(box, matchedElm);

现在这适用于各种填充 and ，但当andmargin=0上的边距为非 0 时会失败。我也尝试过“scrollHeight”，但似乎没有考虑到边距。然后我尝试直接从列表 #1 中的渲染元素获取，但这似乎产生与上述过程完全相同的结果来填充。ph1..6offsetTopoffsets

我怎样才能使重叠工作？我正在寻找原生 javascript 或闭包库解决方案。

4

1 回答 1

0

您正在寻找的可能是goog.style.getPageOffset因为您的重叠元素绝对定位为顶部设置，您可能必须扣除要使用重叠的元素的上边距goog.style.getMarginBox。这是一些示例代码：

<!DOCTYPE html>
<html>
 <head>
<title>test</title>
</head> 
 <body> 
<div id="game" data-something="hello"></div>
 <script type="text/javascript" src="js/goog/base.js"></script>
 <script type="text/javascript">
     goog.require("goog.dom");
     goog.require("goog.style");
 </script>
 </body>
    <div id="contentToOverLap" style="position:absolute;top:30px;left:30px">
        <h1 style="margin:10px;padding:2px">h1 10px mar and 2px pad</h1>
    </div>
    <div id="overlappingContent" style="display:inline">
        <h1 style="color:red;margin:15px;padding:2px;position:absolute">
            h1 15px mar and 2px pa
        </h1>
    </div>
    <script type="text/javascript">
        (function () {
            var pH = goog.dom.$("contentToOverLap").children[0];
            var cH = goog.dom.$("overlappingContent").children[0];
            var box = goog.style.getPageOffset(pH);
            console.log("box is:", box);
            var mar = goog.style.getMarginBox(cH);
            console.log("mar is:", mar);
            var t = box.y - mar.top;
            var l = box.x - mar.left;
            goog.style.setStyle(cH, { "top": t + "px", "left": l + "px" });
        })();
    </script>
</html>
于 2013-06-25T01:21:31.207 回答