Javascript 如何完美地重叠两个（相同的）元素？
在Javascript 如何完美地重叠两个（相同的）元素？,javascript,height,google-closure-library,css,Javascript,Height,Google Closure Library,Css,在位置：相对元素框中，我有 绝对定位的元素parent位于顶部：0，内部有一对静态p和h1..h6。这些可能都有不同的边距/填充值 一些绝对定位的元素，其中元素名称和内容正好匹配上面列表#1中的一个元素 目标是设置第二个元素的y值，使其与1中设置的相应元素完全重叠 我采用了这种方法（使用闭包，但任何东西都可以真正使用），从元素数组content开始生成列表#1: 现在，这适用于各种填充和margin=0，但在p和h1..6上的边距为非0时失败。我也尝试过“scrollHeight”，但似乎没有考
位置：相对元素框中，我有
绝对定位的元素parent
位于顶部：0
，内部有一对静态p
和h1..h6
。这些可能都有不同的边距/填充值
一些绝对定位的元素，其中元素名称和内容正好匹配上面列表#1中的一个元素
目标是设置第二个元素的y值，使其与1中设置的相应元素完全重叠
我采用了这种方法（使用闭包，但任何东西都可以真正使用），从元素数组content
开始生成列表#1:
现在，这适用于各种填充和margin=0
，但在p
和h1..6
上的边距为非0时失败。我也尝试过“scrollHeight”，但似乎没有考虑到边距。
然后我尝试直接从列表#1中的渲染元素获取offsetTop
，但这似乎产生了与上面填充偏移量的过程完全相同的结果
我如何使重叠工作？我正在寻找本机javascript或闭包库解决方案。您正在寻找的可能是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>
测试
goog.require（“goog.dom”）；
goog.require（“goog.style”）；
h1 10px mar和2px衬垫
h1 15px mar和2px pa
（功能（）{
var pH=goog.dom.$（“contentToOverLap”）.children[0]；
var cH=goog.dom.$（“重叠内容”）.children[0]；
变量框=goog.style.getPageOffset（pH）；
控制台日志（“框为：”，框）；
var mar=goog.style.getMarginBox（cH）；
日志（“mar是：”，mar）；
var t=方框y-三月顶部；
var l=方框x-三月左；
goog.style.setStyle（cH，{“top”：t+“px”，“left”：l+“px”}）；
})();
您的答案有效，谢谢！减去goog.style.getMarginBox就成功了。但是你能解释为什么减法吗？我的直觉是parent.offsetHeight给出的值太低（缺少边距），必须添加一些内容，而不是减去？@bebbi看起来设置重叠内容的顶部会设置外部框的顶部（包括边距）。因此，我将顶部设置为30px，边距为10px，然后内容将以40px显示。getPageOffset为您提供了内部框（内容顶部），更改边距将更改其值。我看到了我的代码中的缺陷，因为我从重叠内容的顶部扣除了要重叠的内容的边距，但应该使用重叠内容的边距，代码是有效的，因为它们都是相同的，但如果不是，它将失败。我已经纠正了这个错误。我不确定getPageOffset是如何计算的，但正如前面提到的；它将为您提供内容的位置（因此它包括页边距）。我在代码中没有使用offsetHeight，因为查看getPageOffset的源代码以手动计算元素的位置涉及太多代码，无法重新编写。我也不知道该如何使用它：-）好的，关于如何将顶部设置应用于外盒的解释是有意义的！关于getPageOffset的计算，我可以提供帮助：对于95%的情况，大概是下面的行，对于边缘情况，大概是90多行（抱歉，无法使代码标记工作）：`var getPageOffset=function（element）{var point={x:0，y:0}；var parent=element；do{point.x+=parent.offsetLeft；point.y+=parent.offsetTop；}而（parent=parent.offsetParent）；返回点；}`
var matchedElm = source[i].cloneNode(true);
goog.style.setStyle(matchedElm, {"top": offsets[i] + "px"});
goog.dom.appendChild(box, matchedElm);
<!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>