CODEWITHSUNDEEP
htmlcss
Paul
Paul

Reputation: 348

CSS Box-shadow Missing on Foreground

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>

Upvotes: 0

Views: 725

Answers (2)

Kyle Joeckel
Kyle Joeckel

Reputation: 469

add

z-index: 1000;

to header class and then 

z-index: 900;

to topnav class

z-index essentially is the index of how close or far it appears to you. the closer to zero you get the 'flatter' it will appear and i believe 1000 is the highest in the other direction. usually i set my navbar or whatever top level component i have to z-index 1000 and then go down from there.

Upvotes: 0

seanysean
seanysean

Reputation: 421

/* 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

Upvotes: 2

Related Questions