css - 试图将 Logo 放在 CSS 图像 slider 的顶部

Question

我正在尝试制作这个网站:

http://knightforged.com/stout/index5.html

我想在 slider 顶部放置一个 Logo 。它显示在 slider 后面。导航菜单显示在顶部就好了。

我试过修改 z-indexes，我试过通过改变位置修饰符来修改 slider CSS(来自这里:http://codepen.io/anon/pen/cImqB)。

我的教授尝试了几种不同的方法，但我们仍然无法弄清楚。

我不确定是否可以省略文本，因为可以通过实际网页从源代码中查看它；如果您愿意，我可以将其粘贴到此处。

谢谢。

相关代码如下: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><a href="#">About</a>
                <ul>
                    <li><a href="#">Company History</a></li>
                    <li><a href="#">Customer Testimonials</a></li>
                </ul>
            </li>
            <li><a href="#">Products</a>
                <ul>
                    <li><a href="#">Tile</a></li>
                    <li><a href="#">Metal</a></li>
                    <li><a href="#">Shingle</a></li>
                    <li><a href="#">Flat</a></li>
                </ul>
            </li>
            <li><a href="#">Project Gallery</a></li>
            <li><a href="#">Contact Us</a></li>
            <li><a href="#">Pay Invoice</a></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">&#x2039;</label>
            <label for="img-2" class="next">&#x203a;</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">&#x2039;</label>
            <label for="img-1" class="next">&#x203a;</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(无效代码):

.imgresponsive {
    width:100%;
    height:auto;
}

CSS(工作代码):

.imgresponsive {
    width:100%;
    height:auto;
    position: relative;
    z-index: 597;
    /* z-index: 10 !important; */
}

Answer 1

您将导航 ul 上的 z-index 设置为 597，它正在显示。尝试将类 .imgresponsive(这是 Logo 的类，而不是父 div)的 z-index 设置为 597，并将其位置设置为相对。