Force a div over an auto complete
<p>Is it possible to force an element to render above an automatic autocomplete in chrome? </p>

<p>A simple absolute with a z-index renders fine above the form, but autocompletes don't share the z-ordering of the form element....</p>

<p>I would like to retain the use of the default auto-complete (rather than 3rd party ones).   Googling suggests styling with 'webkit-autofill' might be a relevant, but doesn't seem to help.</p>

<p><em>(I realise this is terrible UI design - you don't have to tell me about that!)</em></p>

<p>Thanks!</p>

<p><a href="https://i.stack.imgur.com/UYHmA.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/UYHmA.png" alt="enter image description here"></a></p>

<pre><code>&lt;body&gt;
    &lt;form&gt;
        &lt;div style="position:absolute;z-index:100;width:100px;right:50px;background:#eeeeee;border:1px solid black"&gt;
            Jennifer&lt;br&gt;
            Alison&lt;br&gt;
            Phillipa&lt;br&gt;
            Sue&lt;br&gt;
        &lt;/div&gt;
        &lt;input id="id1" name="test" style="width:100%"&gt;
    &lt;/form&gt;
&lt;/body&gt;
</code></pre>