Question

我正在用ace编辑器制作一些东西。作为其中的一部分，我有一个允许主题选择的下拉菜单。这是在顶部的栏上（最终会有更多选项）。我知道，为了将栏放在最顶端，我需要在CSS代码中使用position:absolute。然而，这打破了下拉，它实际上不再下降。要明白我的意思，here是一个小提琴。（要进行比较，删除position: absolute的CSS中的#navbar使其工作正常，但不是最顶层[在完整窗口中最明显]。）注意：在小提琴中，我删除了与导航栏无关的所有内容，例如ace代码。

Answer 1

如果从max-height移除.dropChoices，bottom上的overflow和#navbar

，似乎无法正常工作

＆＃13;

// 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');
            }
        }
    }
}

＆＃13;

#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;
}

＆＃13;

<!-- 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>

＆＃13;

Answer 2

如果父级位于绝对位置，则必须相对于父级进行下拉。将父位置设置为relative，然后下拉列表将位于父标记内部或内部。比如示例：

<div style="position:relative;">
<div class="dropdown" style="position:absolute; top:0; left:0;">...</div>
</div>

position：绝对中断CSS下拉列表

2 个答案: