absolute position prevents display

Uncomment the line of CSS to see it vanish.

by needlethread

HTML

<!DOCTYPE html>
<body class="ui-mobile-viewport ui-overlay-a">
    <div class="ui-page ui-page-theme-a ui-page-header-fixed ui-page-active" tabindex="0" data-role="page">
        <div id="area1" class="ui-body ui-body-a" style="min-height:100px;">
            
    <fieldset data-role="controlgroup" data-type="horizontal" class="ui-btn-right">
      <input name="tt_view_sel" id="tt_view_tool" value="tool" 
         checked="checked"
         type="radio">
      <label for="tt_view_tool">Tool</label>
      <input name="tt_view_sel" id="tt_view_data" value="data" 
                  type="radio">
      <label for="tt_view_data">Data</label>
    </fieldset>
        </div>
        <div id="area2" class="ui-body ui-body-a" style="min-height:100px;">
                     <button id="switch">Switch</button>
        </div>
        <div  id="area3" class="ui-body ui-body-a" style="min-height:100px;">      <p id="log">DEFAULT</p></div>

    </div>
</body>

JavaScript

(function($) {

    $(document).ready(function(){
console.log("abc");
        $("#switch").on('click', function() {
		var now = $('input[name=""]').val();
    console.log(now);
    $("#log").html(now);
	    });
        
    });

})( jQuery );