Question

我已经在Google上搜索了很多，但是在那儿或此处都找不到答案。我需要弄清楚如何防止填充背景色溢出到其子元素中。 子元素不能移出其位置。

我尝试了溢出：隐藏，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;
}

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

Answer 1

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

只有位置值不是初始值static的元素才可以使用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>

防止填充背景色溢出到子元素中

2 个答案: