gpt4 book ai didi

html - 固定位置父 div 的绝对定位子 div 出现在父 div 之上

转载 作者:行者123 更新时间:2023-11-28 10:28:00 25 4
gpt4 key购买 nike

我正在尝试制作一个固定位置的菜单栏,其中的菜单托盘从左侧 float 。除了从左侧 z 位置 float 的托盘位于主菜单上方之外,一切正常。

因此,我看不到我在顶部菜单栏上应用的底部阴影。

body {
background: red;
}

.main-menu {
position: fixed;
background: #ffffff;
top: 0;
left: 0;
width: 100vw;
height: 40px;
box-shadow: 0 3px 1px 0 rgba(150, 150, 150, 0.6);
}

.left-menu {
background: #ffffff;
position: absolute;
top: 100%;
left: 0;
width: 200px;
height: 500px;
box-shadow: 0 2px 1px 0 rgba(150, 150, 150, 0.6)
}
<html>

<body>
<div class="main-menu">
<div class="left-menu"></div>
</div>
</body>

</html>

最佳答案

一种解决方案是通过使用插入框阴影在左侧菜单中重复菜单栏的阴影。

body {
background: red;
}

.main-menu {
position: fixed;
background: #ffffff;
top: 0;
left: 0;
width: 100vw;
height: 40px;
box-shadow: 0 3px 1px 0 rgba(150, 150, 150, 0.6);
}

.left-menu {
background: #ffffff;
position: absolute;
top: 100%;
left: 0;
width: 200px;
height: 500px;
box-shadow: 0 2px 1px 0 rgba(150, 150, 150, 0.6),
inset 0 3px 1px 0 rgba(150, 150, 150, 0.6);
}
<html>

<body>
<div class="main-menu">
<div class="left-menu"></div>
</div>
</body>

</html>

但我意识到这有点乱七八糟,我希望有更好的答案!

关于html - 固定位置父 div 的绝对定位子 div 出现在父 div 之上,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48700422/

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