Trying to place logo on top of CSS image slider - css

Question

I am trying to make this website:
http://knightforged.com/stout/index5.html
I am trying to place a logo on top of the slider. It shows behind the slider. The navigation menu shows up on top just fine.
I have tried modifying z-indexes, and I have tried modifying the slider CSS (which comes from here: http://codepen.io/anon/pen/cImqB ) by changing position modifiers.
My professor tried several different things and we still couldn't figure it out.
I'm not sure if it's okay to omit the text since it can be viewed from source via the actual webpage; so if you prefer I can paste it on here.
Thank you.
Here is relevant code:
HTML:
<div class="grid_12">
<div class="grid_4 alpha">
<img src="images/logo.png" class="imgresponsive" />
</div>
<div class="grid_8 omega">
<ul id="nav" class="dropdown menu horizontal">
<li>About
<ul>
<li>Company History</li>
<li>Customer Testimonials</li>
</ul>
</li>
<li>Products
<ul>
<li>Tile</li>
<li>Metal</li>
<li>Shingle</li>
<li>Flat</li>
</ul>
</li>
<li>Project Gallery</li>
<li>Contact Us</li>
<li>Pay Invoice</li>
</ul>
</div>
</div>
<ul class="slides">
<input type="radio" name="radio-btn" id="img-1" checked />
<li class="slide-container">
<div class="slide">
<img src="images/tile_04big.jpg" class="slider_image" />
</div>
<div class="slider_nav">
<label for="img-2" class="prev">‹</label>
<label for="img-2" class="next">›</label>
</div>
</li>
<input type="radio" name="radio-btn" id="img-2" />
<li class="slide-container">
<div class="slide">
<img src="images/tile_13.jpg" />
</div>
<div class="slider_nav">
<label for="img-1" class="prev">‹</label>
<label for="img-1" class="next">›</label>
</div>
</li>
<li class="nav-dots">
<label for="img-1" class="nav-dot" id="img-dot-1"></label>
<label for="img-2" class="nav-dot" id="img-dot-2"></label>
</li>
</ul>
CSS (unworking code):
.imgresponsive {
width:100%;
height:auto;
}
CSS (working code):
.imgresponsive {
width:100%;
height:auto;
position: relative;
z-index: 597;
/* z-index: 10 !important; */
}

Answer 1

You have the z-index on the navigation ul set to 597 and it is showing up. Try setting the class .imgresponsive (which is the class for the logo not th parent div) z-index to 597 and set its position to relative.

Answer 2

You can do it for example by styling your logo with this:
#logo {
position: relative;
z-index: 1;
}
The logo id should be for the image of your logo
This is how it looks: screenshot

Answer 3

Can you try this one,
inline css:
<img style="z-index:10!important;position:relative;" src="images/logo.png" class="imgresponsive">
css:
.imgresponsive{
z-index:10!important;
position:relative;
}