Position:Absolute withing Position:Relative in Chrome

http://stackoverflow.com/questions/5338857

by Marcel

HTML

<div>Solution: <select>
    <option value="none">None</option>
    <option value="auto">overflow:auto</option>
    <option value="hidden">overflow:hidden</option>
    <option value="clearfix">clearfix</option>
</select></div>

<form><ul><li>
    <label>Name</label>
    <input type="text" />
    <a class="widget"></a>
</li></ul></form>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis aliquet velit nibh. Phasellus euismod purus a erat lacinia at viverra lorem sagittis.</p>

CSS

/* Supplied CSS */
form ul li { width:20em; margin:5px; position:relative; }
form label { float:left; width:5em; }
form input { float:right; margin:0; }
form .widget { top:0; right:0; z-index:99; position:absolute; }

/* Extra CSS for demo */
body { font:13px/1.4 'segoe ui', sans-serif; }
p { margin:1em 0; }
div { margin:0 0 2em; padding:.5em 1em; background:#eeeeed; }
form .widget { width:50px; height:20px; background:#333; }
form .widget:hover { height:100px; }

body#auto form ul li { overflow:auto; }

body#hidden form ul li { overflow:hidden; }

body#clearfix form ul li:after { height:0; clear:both; content:" "; font-size:0; display:block; visibility:hidden; }
body#clearfix form ul li { display:inline-block; }
/* start commented backslash hack \*/
* html body#clearfix form ul li { height: 1%; }
body#clearfix form ul li { display: block; }
/* stop commented backslash hack */

JavaScript

$("select").change(function(){
    $("body").attr("id", $(this).val());
});