如何完美重疊兩個（相同）元素？

一個position:relative元素box裏面，我有如何完美重疊兩個（相同）元素？

一個絕對定位的元素parent在top:0一對夫婦的靜態p和h1..h6內。這些可能都有不同的保證金/填充值。
幾個絕對定位的元素，其中元素名稱和內容完全匹配上面列表＃1中的一個元素。

目標是設置第二個元素的y值，使其與第一個元素中的相應元素完全重疊。

我已經採取了這種做法（使用關閉，但什麼事情都可能被真正使用），從元素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);

現在，這適用於各種填充和margin=0，但在利潤率上p和h1..6都是非0失敗。我也嘗試過「scrollHeight」，但似乎沒有考慮到利潤率。然後我嘗試直接從列表＃1中的呈現元素獲得offsetTop，但是這似乎產生與上述過程完全相同的結果以填充offsets。

我怎樣才能使重疊工作？我正在尋找一個原生的JavaScript或封閉庫解決方案。

來源

2013-06-24 bebbi

你在找什麼可能是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-25 01:21:31 HMR

您的回答有用，謝謝！減去goog.style.getMarginBox的伎倆。但你能解釋爲什麼減法？我的直覺是，parent.offsetHeight給出的值太低（缺乏邊際），而且必須添加一些東西，而不是減去？ – bebbi

@bebbi它看起來像設置重疊內容的頂部設置外框的頂部（包括邊距）。所以我將頂部設置爲30px，邊距爲10px，然後內容將顯示爲40px。 getPageOffset爲您提供內部框（內容的頂部），更改空白將會更改其值。我在代碼中看到了缺陷，因爲我從重疊內容的頂部中扣除了要重疊的內容的邊距，但應該使用重疊內容的邊距，代碼的工作原理是兩者相同，但如果它們不相同，則會失敗。我糾正了這個錯誤。 – HMR

我不確定如何計算getPageOffset，但如前所述;它會給你的內容的位置（所以它包括利潤）。我沒有在我的代碼中使用offsetHeight，因爲查看getPageOffset的源代碼來手動計算元素的位置涉及太多的代碼來重新編寫。我不知道如何使用它:-) – HMR

如何完美重疊兩個（相同）元素？

回答

相關問題