JSFiddle - React, Tailwind, and code Playground

by yiminghe

HTML

<script src="https://getfirebug.com/firebug-lite-debug.js"></script>
<div id="div0">absolute left 1%</div>
<div id="div1">absolute left auto</div>
<div id="div2">static left 1%</div>
<div id="div3">static left auto</div>
<div id="div4">static</div>
<div id="div5">relative</div>
<div id="div6">fixed</div>
<div id="results"></div>

CSS

#div0 {
	position: absolute;
	left: 1%;
}
#div1 {
	position: absolute;
	left: auto;
}
#div2 {
	left: 1%;
}
#div3 {
	left: auto;
}

#div5 {
    position:relative;
}

#div6 {
    position:fixed;
}

JavaScript

var i,
    expected = [ "px", "px", "auto", "auto", "auto" , "px" ,"px"];

for ( i = 0; i < 7; i++ ) {
    console.log($("#div"+i).html()); 
    console.log( "div" + i + ", computed left: " +
        getComputedStyle( document.querySelector( "#div" + i ) ).left );
    console.log( "div" + i + ", jQuery   left: " + $( "#div" + i ).css( "left" ) );
    console.log( "div" + i + ", expected unit: " + expected[ i ]);
    console.log();
}