how to perfectly overlap two (identical) elements?

StackOverflow https://stackoverflow.com/questions/17286537

Question

Inside a position:relativeelement box, I have

  1. a absolutely positioned element parent at top:0 with a couple of static p and h1..h6inside. Those may all have different margin/padding values.
  2. a few absolutely positioned elements where element name and content matches exactly one of the elements from above list #1.

The goal is to set the y-value of the 2nd element such that it exactly overlaps with the corresponding one from the set in 1. .

I've taken this approach (using closure, but anything could be used really), starting with an Array of elements contentfor generating list #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;

Then, using the values from offsets:

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

Now this works for various paddings and margin=0, but fails when margins are non-0 on the p and h1..6. I have also tried "scrollHeight" but nothing seems to take into account margins. I've then tried getting offsetTop directly from the rendered elements in list #1, but this seems to yield exact same results as above procedure to fill offsets.

How can I make the overlap work? I'm looking for a native javascript or closure-library solution.

Was it helpful?

Solution

What you are looking for may be goog.style.getPageOffset and because your overlapping element is absolutely positioned with a top setting you may have to deduct the top margin of the element you want to overlap using goog.style.getMarginBox. Here is some sample code:

<!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>
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top