Q:

HTML elements do not position as expected

I am dynamically assembling divs within divs and adding text to each internal div - building a list with a Javascript list adapter.  The internal list divs display as desired, but the respective text divs in each list div does not:
Example:

As you can see in the image the text div on the right in red text is slightly higher than the one on the left in green.  I have set the properties for each as such:
In Javascript I add them in a loop using the following:
var divGreen = document.createElement("div");
divGreen.style.position = "relative";
divGreen.style.width = "10%";
divGreen.style.left = "100%";
divGreen.style.top = "100%";
divGreen.style.marginLeft = "-40%";
divGreen.style.marginTop = "-20%";
divGreen.style.color = "green";
divGreen.style.textAlign="left";
divGreen.style.backgroundColor = "#cccccc";                 
divGreen.innerHTML = 'Text';
div.appendChild(divGreen);

var divRed = document.createElement("div");
divRed.style.position = "relative";
divRed.style.width = "10%";
divRed.style.left = "100%";
divRed.style.top = "100%";
divRed.style.marginLeft = "-20%";
divRed.style.marginTop = "-20%";
divRed.style.color = "red";
divRed.style.textAlign="left";
divRed.style.backgroundColor = "#cccccc";                   
divRed.innerHTML = 'Text';
div.appendChild(divRed);

Also, the literal Text is used to eliminate character size differences.
Why do they not line up vertically as expected?  What am I missing?

A:

After reviewing this SO post - It's clear my understanding of absolute positioning was wrong.  By setting the position absolute on the parent, I can use absolute positioning of it's children relative to the parent.  The key is the parent having position set to absolute!
var divGreen = document.createElement("div");
divGreen.style.position = "absolute";
divGreen.style.width = "10%";
divGreen.style.left = "100%";
divGreen.style.top = "37px";
divGreen.style.marginLeft = "-40%";
divGreen.style.color = "green";
divGreen.style.textAlign="left";
divGreen.style.backgroundColor = "#cccccc";                 
divGreen.innerHTML = 'Text';
div.appendChild(divGreen);

var divRed = document.createElement("div");
divRed.style.position = "absolute";
divRed.style.width = "10%";
divRed.style.left = "100%";
divGreen.style.top = "37px";
divRed.style.marginLeft = "-20%";
divRed.style.color = "red";
divRed.style.textAlign="left";
divRed.style.backgroundColor = "#cccccc";                   
divRed.innerHTML = 'Text';
div.appendChild(divRed);

Now my links are aligned vertically as intended:

