Question

在position:relative元素box内，我有

位于parent的绝对定位元素top:0，里面有几个静态p和h1..h6。这些可能都有不同的边距/填充值。
一些绝对定位的元素，其中元素名称和内容恰好与上面列表＃1中的一个元素匹配。

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

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

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);

现在这适用于各种填充和margin=0，但在p和h1..6上的边距不为0时失败。我也试过“scrollHeight”但似乎没有考虑到边距。然后我尝试直接从列表＃1中的呈现元素中获取offsetTop，但这似乎与上面的过程完全相同，以填充offsets。

如何使重叠工作？我正在寻找原生的javascript或封闭库解决方案。

Answer 1

您要查找的内容可能是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>

如何完美地重叠两个（相同的）元素？

1 个答案: