position:absolute breaks CSS dropdown - css

Question

I am making something with ace editor. As part of this, I have a dropdown menu that allows theme selection. This is on a bar at the top, (which will eventually have more options). I know that, in order to position the bar at the very top, I need to use position:absolute in the CSS code. However, this breaks the dropdown, and it no longer actually drops down. To see what I mean, here is a fiddle. (To compare, removing position: absolute in the CSS for #navbar makes it work fine, but is not at the very top [most visible in a full window].)
Note: In the fiddle, I have removed everything not related to the navbar, such as the ace code.

Answer 1

Seems to work fine if you remove the max-height from .dropChoices, the bottom and overflow on #navbar
// The function changeTheme() is defined in the full code
function toggle(button) {
var dropList = button.nextElementSibling;
function isDropdown() {
return (" " + dropList.className + " ").indexOf(" dropChoices ") > -1;
}
while (!isDropdown) {
dropList = dropList.nextElementSibling;
}
dropList.classList.toggle("hidden");
window.onclick = function(e) {
if (!e.target.matches('.dropButton') && !e.target.matches('.dropChoices')) {
if (!dropList.classList.contains('hidden')) {
dropList.classList.add('hidden');
}
}
}
}
#navbar {
position: absolute;
top: 0;
left: 0;
right: 0;
background-color: dimgray;
}
.navOption {
font-size: 12px;
color: white;
padding: 1px 13px;
}
.dropButton {
box-sizing: border-box;
cursor: pointer;
font-size: 16px;
border: none;
color: white;
padding: 13px 16px;
background-color: inherit;
}
.navOption:hover, .navOption:active, .navOption:focus {
background-color: gray;
outline: none;
}
.dropChoices {
font-size: 16px;
overflow: auto;
display: block;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
z-index: 5;
max-height: calc(100vh - 50px);
}
.dropChoices p {
color: black;
outline: none;
padding: 12px 16px;
cursor: pointer;
margin: 0;
text-align: left;
}
.dropChoices p:hover, .dropChoices p:focus {
background-color: lightgray;
}
p.dropTitle {
cursor: initial;
}
p.dropTitle:hover {
background-color: #f9f9f9;
}
.hidden {
display: none;
}
<!-- This code is slightly shortened, and only contains the relevant things -->
<div id="navbar">
<button onclick="toggle(this)" class="dropButton navOption">Themes</button>
<div id="themesList" class="dropChoices hidden">
<p class="dropTitle"><b>Light</b></p>
<p tabindex="0" id="chrome" onclick="changeTheme(this.id)">Chrome</p>
<p tabindex="0" id="clouds" onclick="changeTheme(this.id)">Clouds</p>
<p tabindex="0" id="crimson_editor" onclick="changeTheme(this.id)">Crimson Editor</p>
<p tabindex="0" id="dawn" onclick="changeTheme(this.id)">Dawn</p>
<p tabindex="0" id="dreamweaver" onclick="changeTheme(this.id)">Dreamweaver</p>
<p tabindex="0" id="eclipse" onclick="changeTheme(this.id)">Eclipse</p>
<p tabindex="0" id="gitHub" onclick="changeTheme(this.id)">GitHub</p>
<p tabindex="0" id="iplastic" onclick="changeTheme(this.id)">IPlastic</p>
<p tabindex="0" id="solarized_light" onclick="changeTheme(this.id)">Solarized Light</p>
<p tabindex="0" id="textmate" onclick="changeTheme(this.id)">TextMate</p>
<p tabindex="0" id="tomorrow" onclick="changeTheme(this.id)">Tomorrow</p>
<p tabindex="0" id="xcode" onclick="changeTheme(this.id)">XCode</p>
<p tabindex="0" id="kuroir" onclick="changeTheme(this.id)">Kuroir</p>
<p tabindex="0" id="katzenmilch" onclick="changeTheme(this.id)">KatzenMilch</p>
<p tabindex="0" id="sqlserver" onclick="changeTheme(this.id)">SQL Server</p>
<p class="dropTitle"><b>Dark</b></p>
<p tabindex="0" id="ambiance" onclick="changeTheme(this.id)">Ambiance</p>
<p tabindex="0" id="chaos" onclick="changeTheme(this.id)">Chaos</p>
<p tabindex="0" id="clouds_midnight" onclick="changeTheme(this.id)">Clouds Midnight</p>
<p tabindex="0" id="cobalt" onclick="changeTheme(this.id)">Cobalt</p>
<p tabindex="0" id="gruvbox" onclick="changeTheme(this.id)">Gruvbox</p>
<p tabindex="0" id="idle_fingers" onclick="changeTheme(this.id)">idle Fingers</p>
<p tabindex="0" id="kr_theme" onclick="changeTheme(this.id)">krTheme</p>
<p tabindex="0" id="merbivore" onclick="changeTheme(this.id)">Merbivore</p>
<p tabindex="0" id="merbivore_soft" onclick="changeTheme(this.id)">Merbivore Soft</p>
<p tabindex="0" id="mono_industrial" onclick="changeTheme(this.id)">Mono Industrial</p>
<p tabindex="0" id="monokai" onclick="changeTheme(this.id)">Monokai</p>
<p tabindex="0" id="pastel_on_dark" onclick="changeTheme(this.id)">Pastel on dark</p>
<p tabindex="0" id="solarized_dark" onclick="changeTheme(this.id)">Solarized Dark</p>
<p tabindex="0" id="terminal" onclick="changeTheme(this.id)">Terminal</p>
<p tabindex="0" id="tomorrow_night" onclick="changeTheme(this.id)">Tomorrow Night</p>
<p tabindex="0" id="tomorrow_night_blue" onclick="changeTheme(this.id)">Tomorrow Night Blue</p>
<p tabindex="0" id="tomorrow_night_bright" onclick="changeTheme(this.id)">Tomorrow Night Bright</p>
<p tabindex="0" id="tomorrow_night_eighties" onclick="changeTheme(this.id)">Tomorrow Night 80s</p>
<p tabindex="0" id="twilight" onclick="changeTheme(this.id)">Twilight</p>
<p tabindex="0" id="vibrant_ink" onclick="changeTheme(this.id)">Vibrant Ink</p>
</div>
</div>

Answer 2

You have to make the drop down relative to the parent if its going to be in absolute position.
Set the parent position to relative, and then the dropdown will be positioned inside or within the parent tag.
Like Example:
<div style="position:relative;">
<div class="dropdown" style="position:absolute; top:0; left:0;">...</div>
</div>