我无法获取标题类中的CSS盒子阴影以覆盖它下面的导航栏。 阴影出现在标题后面，但在底部不可见。 完整的例子是一个带有标题，导航栏和正文内容页脚的三列页面布局。 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>
I cannot get the CSS box-shadow in the header class to overlap the navbar below it. The shadow appears behind the header but it is not visible on the bottom. The full example is a three column page layout with a header, nav bar and body content footer. 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 （或者您可以使用absolute或fixed ，但在这种情况下，它会破坏布局。z-index仅适用于'定位'（即具有除静态以外的任何位置的元素）。
因此，简单来说，您需要定位.header并为其指定一个高于.topnav的z-index 。 由于.topnav没有z-index，对于.topnav ，z-index是1。
在这里进行实验和阅读： https ： //developer.mozilla.org/en-US/docs/Web/CSS/z-index
/* 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>
You simply add position: relative (or you could use absolute or fixed, but in this case, it would break the layout. z-index only works on 'positioned' (that is, one with any position other than static) elements).
So, to put it simply, you to position you .header and give it a z-index that is higher than .topnav. As .topnav has no z-index, a z-index of 1 works fine for the .header.
Experiment and read more here: https://developer.mozilla.org/en-US/docs/Web/CSS/z-index
更多推荐
发布评论