JSFiddle - React, Tailwind, and code Playground

by yiminghe

HTML

<script src="https://getfirebug.com/firebug-lite-debug.js"></script>
<div id="div0"></div>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
<div id="div4"></div>
<div id="div5"></div>
<div id="div6"></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"];

for ( i = 0; i < 7; i++ ) {
    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();
}