Question

我正在努力建立这个网站：

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

我正在尝试在滑块顶部放置徽标。它显示在滑块后面。导航菜单显示在最佳状态。

我尝试修改z-index，我尝试通过更改位置修饰符来修改滑块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（这是徽标的类而不是父div）设置为z-index为597并将其位置设置为相对。

Answer 2

您可以通过以下方式设置徽标样式来执行此操作：

#logo {
    position: relative;
    z-index: 1;
}

徽标ID应该是徽标图片

它的外观如下：screenshot

Answer 3

你能尝试一下，

内联css：

 <img style="z-index:10!important;position:relative;" src="images/logo.png" class="imgresponsive">

<强>的CSS：

.imgresponsive{
     z-index:10!important;
     position:relative;
  }

尝试在CSS图像滑块顶部放置徽标

3 个答案: