Position Absolute Testing

Position Absolute Testing

by jacobwsmith

HTML

<div id="wrapper"></div>

CSS

.ad{
    padding:10px;
    background-color: #cccccc;
    display: block;
    width: 300px;
    top:0;
    right:0;
}
#wrapper{
    width: 1600px;
    height: 1600px;    
}
h2{
    font-size: 18px;
    font-family: Arial;
}

JavaScript

var test= function(obj){
    try{
        var $ad = document.createElement('div'),
            $div = document.createElement('div'),             
            css,
            testHeight = '10px',
            $wrapper = document.getElementById('wrapper'),
            $title = document.createElement('h2');
            
        // Add Title
        $title.innerHTML = obj;
        $wrapper.appendChild($title);
        
        // Add the ad slot
        $ad.id = obj;
        $ad.style.position = obj;
        $ad.className = 'ad';        
        $ad.innerHTML = '<a href="http://www.google.com"><img src="http://www.adimator.com/v6/img/300x250.png" /></a>';
        if(obj == 'fixed'){
                $ad.style.top = '325px';
        }
        
        // ===================================================
        // FIXED - Issue if parent is static
        if(obj == 'static'){
            $ad.style.position = 'relative';
        }
        // ===================================================
        
        $wrapper.appendChild($ad);
        
        // Wait to load
        setTimeout(function(){
            
            //$ad.style.height = $ad.offsetHeight;
            console.log('start height: ' + $ad.offsetHeight);            
            css = {
                height: testHeight, // This should be 1. Use larger values for testing.
                width: testHeight, // This should be 1. Use larger values for testing.
                //marginTop: '-'+ testHeight,
                overflow: 'hidden',
                top: '125px', // Top is a negative value and half of the ad
                position: 'absolute', // The element is positioned relative to its normal position,
                backgroundColor: 'yellow' // For testing purposes only
            };            
            for (i in css) {
                $div.style[i] = css[i];
            }            
            $ad.appendChild($div);
            
            console.log('end height: ' +...