防止 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;
}

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

Answer 1

Position div.dropdown 这样您就可以使用 z-index 来控制相对于周围元素的堆叠顺序，防止菜单重叠。

只有位置值不是初始值 - static - 的元素才能具有其堆叠上下文 re-arranged 和 z-index 参见 MDN 的示例。

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

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

Answer 2

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

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

<!--Change Html to:-->

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

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

prevent padding background-color from overflowing into child element

html

css

padding