Cannot get option from select if position is set to absolute? - html

Question

It appears than when I attempt to set my phonebook's CSS position to absolute, I simply lock the select element. Relevant HTML/CSS below. When I remove the position: absolute; from the code, it runs perfectly fun; however, my HTML gets pushed down which is what I'm trying to avoid.
HTML
<div id="phonebook">
<select id="catalog">
<option value="u_none">None</option>
<option value="u_1">John Doe (555-555-1254)</option>
<option value="u_2">Jane Doe (555-555-2894)</option>
</select>
<div id="employee-info">
<div id="employee-content">
Role or Title<br>
Full Name<br>
Contact:<br>
Telephone: [phone]<br>
Email: name.lastname#domain.com<br>
Room: A-5555<br>
Mail Stop: A-555
</div>
</div>
</div>
CSS
#phonebook {
position: absolute;
width: 320px;
z-index: -1;
}
#employee-info {
border: 1px solid #aaa;
border-top: 0 none;
}
#employee-content {
padding: 10px;
}
#catalog {
position: relative;
border: 1px solid #aaa;
width: 100%;
z-index: 1;
}
I've tried to play around with z-index -- at the suggestion of a somewhat unrelated post -- but it still seems to do me no good. I need this element in a specific portion and it relies heavily on using this dropdown select element.
Is there anyway to overcome this issue? I'm not exactly sure what is preventing my access to the select dropdown. An explanation would also be awesome.
Thanks ahead. Any help is appreciated.

Answer 1

There must be more to it, because when I put your exact code into a snippet, it works fine. I see no difference with and without the position: absolute;
Please edit your question to put the code in a snippet (or jsfiddle) that shows the problem.
#phonebook {
position: absolute;
width: 320px;
z-index: -1;
}
#employee-info {
border: 1px solid #aaa;
border-top: 0 none;
}
#employee-content {
padding: 10px;
}
#catalog {
position: relative;
border: 1px solid #aaa;
width: 100%;
z-index: 1;
}
<div id="phonebook">
<select id="catalog">
<option value="u_none">None</option>
<option value="u_1">John Doe (555-555-1254)</option>
<option value="u_2">Jane Doe (555-555-2894)</option>
</select>
<div id="employee-info">
<div id="employee-content">
Role or Title
<br>Full Name
<br>Contact:
<br>Telephone: [phone]
<br>Email: name.lastname#domain.com
<br>Room: A-5555
<br>Mail Stop: A-555
</div>
</div>
</div>