Databases
StackOverflow2013
Postsdbo
POHow come the navigation's box-shadow isn't showing?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow come the navigation's box-shadow isn't showing?
    text
    copied!<p>I want to have the header's navigation to have a box shadow. However, the box-shadow seems to be hidden by the carousel I placed below it. I put a z-index of all children of #carousel but the box-shadow still doesn't show up.</p> <p>(page snippet) <img src="https://i.stack.imgur.com/E1HbP.jpg" alt="enter image description here"></p> <p>Here's what happens when I push #carousel down when I give it margin-top: 40px;</p> <p>(another page snippet) <img src="https://i.stack.imgur.com/DFcJA.jpg" alt="enter image description here"></p> <p><strong>HTML</strong></p> <pre><code>&lt;header&gt; &lt;nav&gt; &lt;div class="container"&gt; &lt;h1&gt;&lt;a href="#"&gt;&lt;img src="images/logo.png" alt="" id="logo"&gt;&lt;/a&gt;&lt;/h1&gt; &lt;h1 id="NHS"&gt;&lt;a href="#"&gt;Newport High School&lt;/a&gt;&lt;/h1&gt; &lt;ul id="nav"&gt; &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;About&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Students&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Parents&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Activities &amp; Atletics&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Resources&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt;&lt;!--container---&gt; &lt;/nav&gt; &lt;/header&gt;&lt;div id="carousel"&gt; &lt;div class="inner"&gt; &lt;ul&gt; &lt;li&gt;&lt;img src="images/example-slide-1.jpg" alt="Fish"&gt;&lt;/li&gt; &lt;li&gt;&lt;img src="images/example-slide-2.jpg" alt="Elephant"&gt;&lt;/li&gt; &lt;li&gt;&lt;img src="images/example-slide-3.jpg" alt="Giraffe"&gt;&lt;/li&gt; &lt;li&gt;&lt;img src="images/example-slide-4.jpg" alt="Fish"&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p><strong>CSS</strong></p> <pre><code>/* - - - header - - - */ header { background: rgb(30,27,27); /* Old browsers */ background: -moz-linear-gradient(top, rgba(30,27,27,1) 0%, rgba(2,2,2,1) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(30,27,27,1)), color-stop(100%,rgba(2,2,2,1))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgba(30,27,27,1) 0%,rgba(2,2,2,1) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(30,27,27,1) 0%,rgba(2,2,2,1) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, rgba(30,27,27,1) 0%,rgba(2,2,2,1) 100%); /* IE10+ */ background: linear-gradient(to bottom, rgba(30,27,27,1) 0%,rgba(2,2,2,1) 100%); box-shadow: 0px 3px 15px rgba(50, 50, 50, .7); -webkit-box-shadow: 0px 3px 15px rgba(50, 50, 50, .7); -moz-box-shadow: 0px 3px 15px rgba(50, 50, 50, .7); z-index: 1000; } header h1, header li { float: left; } header a { color: #A1A1A1 ; font-family: arial, helvetica, verana, sans-serif; } header a:hover { color: #A1A1A1; text-decoration: none; } #logo { width: 50px; } #NHS { margin: 1.8% 0 0 2%; font-size: 1.2em; text-transform: uppercase; } #NHS a { color: #F6F6F6; letter-spacing: 2px; } #nav { float: right; margin: 3% 0 0 0; } #nav li { margin-right: 20px; padding: 0; } #nav li:last-of-type { margin-right: 0px; } #nav a { font-size: .8em; text-transform: uppercase; padding-top: 3px; font-weight: 400; } #nav a:hover { border-top: 1px dotted #C41D0E; } /* - - - carousel - - - */ #carousel { margin: 40px 0 0 0; width: 100%; overflow: hidden; z-index: -999; } #carousel .inner { box-sizing: border-box; margin-left: -50px; z-index: -5000; } #carousel ul { width: 60000px; height: 480px; z-index: -5000; } #carousel li { height: 480px; float: left; overflow: hidden; z-index: -5000; } #carousel img { text-align: center; width: 1375px; height: auto; z-index: -5000; } </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload