absolute position prevents display

Uncomment the line of CSS to see it vanish.

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;">
            <!-- class="ui-grid-a" -->
            <div class="ui-grid-a">
                <div class="ui-block-a">
                    <div class="tt_autocomplete_wrap">
                        <ul class="jqm_autocomplete ui-listview ui-listview-inset ui-corner-all ui-shadow" data-role="listview" data-inset="true" >
                            <li class="ui-first-child" > <a class="ui-btn ui-btn-icon-right ui-icon-carat-r" href="#">Not Seen If Absolute</a>

                            </li>
                        </ul>
                    </div>
                </div>
                <!-- ui-block-a -->
                <div class="ui-block-b"></div>
                <!-- ui-block-b -->
                <!-- -->
            </div>
            <!-- -->
        </div>
        <div>
            <div class="tt_autocomplete_wrap">
                <ul class="jqm_autocomplete ui-listview ui-listview-inset ui-corner-all ui-shadow" data-role="listview" data-inset="true" >
                    <li class="ui-first-child " > <a class="ui-btn ui-btn-icon-right ui-icon-carat-r" href="#">Seen</a>

                    </li>
                </ul>
            </div>
        </div>
    </div>
</body>

CSS

.jqm_autocomplete {
    /* uncomment the next line to see the problem */
    position: absolute;
    z-index: 120000;
    border: 3px solid black;
}

.tt_autocomplete_wrap {
    position: relative;
}

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
    border: 0;
    font-size: 100%;
    font: inherit;
    margin: 0;
    padding: 0;
    vertical-align: baseline;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
    content:'';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
button, input, select, textarea {
    font-size: 100%;
    overflow: visible;
    margin: 0;
    vertical-align: baseline;
    width: auto;
}
textarea {
    overflow: auto;
    vertical-align: text-top;
}
html {
    height: 90%;
}
body {
    -moz-font-smoothing: antialiased;
    -webkit-font-smoothing: antialiased;
    background: white;
    color: #555555;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    font-smoothing: antialiased;
    line-height: 1.5em;
    text-rendering: optimizeLegibility;
}
p {
    word-wrap: break-word;
}
.tt_autoindex {
    display: none;
}