gpt4 book ai didi

html - 前景中缺少 CSS 框阴影

转载 作者:太空宇宙 更新时间:2023-11-04 07:32:14 25 4
gpt4 key购买 nike

我无法让 header 类中的 CSS box-shadow 与它下面的导航栏重叠。阴影出现在标题后面,但在底部不可见。完整示例是一个三列页面布局,带有页眉、导航栏和正文内容页脚。 Codepen

/* Header/Blog Title */
.header {
padding: 30px;
text-align: center;
background: white;
box-shadow: 1px 18px 5px red;
}

.header h1 {
font-size: 50px;
}

/* Style the top navigation bar */
.topnav {
overflow: hidden;
background-color: #333;
}

/* Style the topnav links */
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
<body>

<div class="header">
<h1>My Website</h1>
<p>Resize the browser window to see the effect.</p>
</div>

<div class="topnav">
<a href="#">Link</a>
<a href="#">Link</a>
<a href="#">Link</a>
<a href="#" style="float:right">Link</a>
</div>
</body>

最佳答案

/* Header/Blog Title */
.header {
padding: 30px;
text-align: center;
background: white;
box-shadow: 1px 18px 5px red;
position: relative;
z-index: 2;
}

.header h1 {
font-size: 50px;
}

/* Style the top navigation bar */
.topnav {
overflow: hidden;
background-color: #333;
}

/* Style the topnav links */
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
<body>

<div class="header">
<h1>My Website</h1>
<p>Resize the browser window to see the effect.</p>
</div>

<div class="topnav">
<a href="#">Link</a>
<a href="#">Link</a>
<a href="#">Link</a>
<a href="#" style="float:right">Link</a>
</div>
</body>

您只需添加 position: relative(或者您可以使用 absolutefixed,但在这种情况下,它会破坏布局。 z-index 仅适用于“已定位”(即具有非静态位置的任何位置的元素)。

所以,简单来说,你定位你的 .header 并给它一个高于 .topnavz-index .由于 .topnav 没有 z-index,因此 z-index 为 1 对 .header 可以正常工作。

在此处进行实验并阅读更多内容:https://developer.mozilla.org/en-US/docs/Web/CSS/z-index

关于html - 前景中缺少 CSS 框阴影,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49263907/

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