gpt4 book ai didi

html - 使用 z-index 的 CSS 不会将子元素放在其父元素后面

转载 作者:可可西里 更新时间:2023-11-01 13:21:15 29 4
gpt4 key购买 nike

我正在尝试制作一个从页眉滑动的下拉菜单。我有一个标题,里面有一些带有 border-bottom 1px 线和背景色的 div。在这个 div 中,我想放置 Logo 、搜索框、一些链接和一个用户配置文件按钮。单击此按钮后,我想在此按钮下方下拉菜单。不幸的是,这个下拉菜单出现在标题前面,而不是从标题后面滑动(遮住了标题背景和底部边框线)。我已经尝试过如下解决方案(它是简化版)。

header {
position: relative;
z-index: 5;
}

.dropdown {
background-color: yellow;
width: 100px;
height: 100px;
position: absolute;
z-index: 1;
}

.background {
position: absolute;
background-color: #ccca;
border-bottom: 1px solid black;
width: 100%;
height: 50px;
z-index: 2;
}
<header>
<div class="background">
<div class="dropdown">
</div>
</div>
</header>

我尝试了很多 z-index 配置,但似乎都不起作用。1. div.background with z-index 2, div.dropdown with z-index 1 or even -12. div.background 没有 z-index 和 position,div.dropdown 有 z-index -1(这里下拉列表在标题后面,但菜单链接停止工作,菜单也在网页的主要内容后面)

如何使我的 div.dropdown 从带有背景和边框底线的标题栏后面滑动?是否可以将此 div.dropdown 放在标题 div 树中作为后代元素。

最佳答案

这对于负 z-index 是可能的;但是,它不适用于具有非自动 z-index 的父元素。设置 .background元素有一个 z-index:auto (或者直接取下它。auto 是默认值)。拥有一个具有正 z-index 的祖先元素是可以的(并且推荐 imo)以避免负 z-indexed 元素低于 <html><body>元素。在本例中,您这样做(header 的 z-index 为 5),所以没问题。

<html>
<head>
<style type="text/css">
header {
position:relative;
z-index:5;

}
.dropdown {
background-color: yellow;
width: 100px;
height: 100px;
position: absolute;
z-index: -1;
}
.background {
position: absolute;
background-color:#ccca;
border-bottom: 1px solid black;
width: 100%;
height: 50px;
z-index: auto;
}
</style>
</head>
<body>
<header>
<div class="background">
<div class="dropdown">
</div>
</div>
</header>
</body>
</html>

关于html - 使用 z-index 的 CSS 不会将子元素放在其父元素后面,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47680438/

29 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com