html - 防止 padding background-color 溢出到子元素中

Question

我已经用谷歌搜索了很多，但我无法在那里或这里找到答案。我需要弄清楚如何防止 padding background-color 溢出到它的子元素中。 子元素不能移出它的位置。

我已经尝试过 overflow:hidden、z-index 和几乎所有的东西。

只看 jsfiddle 绝对是最简单的: https://jsfiddle.net/so23hbf0/3/

HTML:

<div class="navbar">
<a href="#home">Home</a>
<a href="#news">News</a>
<div class="dropdown">
    <a href="#" class="dropbtn">Books & Media</a>
    <div class="dropdown-content">
        <div class="header">
            <h2>Mega Menu</h2>
        </div>   
    </div>
</div> 

CSS:

.navbar {
    overflow: hidden;
    background-color: yellow;
 }

.navbar a {
    padding: 2rem 1.6rem;
  overflow: hidden;
}

.dropdown {
    overflow: hidden;
    display: inline;
}

.navbar a:hover {
    background-color: black;
}

.dropdown-content {
    background-color: gray;
}

请注意，当您将鼠标悬停在链接上时，黑色背景如何溢出到灰色的“ super 菜单”区域。但它不会溢出顶部。我想防止它向下溢出。

Answer 1

定位 div.dropdown 以便您可以使用 z-index 控制与周围元素相关的堆栈顺序，防止菜单重叠。

只有位置值不是初始位置值的元素 - static - 可以使用 z-index 重新排列它们的堆叠上下文，请参阅 MDN例如。

div.dropdown {
    /* ... */
    position: relative; 
    z-index: 1;
}

例如:https://jsfiddle.net/0mczuLsx/