Question

我在不同的地方遇到过这个问题，我有一个ul列表，我试图将它添加到div（图像或背景）之上，但列表没有出现在顶部。我想知道它是否在后面发送..我甚至添加了z-index

CSS

.toolbar p{ text-align: right; padding: 10px 180px 0 0; color: #fff; font-size: 26px; z-index: 1; }
.toolbar { width: auto; height: 50px; background-color:  #cc1e2c; z-index: 1;}
.social-icons { z-index: 2;}

HTML

<div class="col_full toolbar"> 
            <p>CALL NOW: +1 555.555.1234</p>
            <ul class="social-icons">
                <li> <a href="graphics/twitter_icon.jpg" target="_blank"> </a></li>
                <li> <a href="graphics/instagram_icon.jpg" target="_blank"> </a></li>
                <li> <a href="graphics/facebook_icon.jpg" target="_blank"> </a></li>
            </ul>
        </div>

Answer 1

您没有看到任何内容的原因是您发布了没有任何内容的链接。如果您添加了单词，则会显示以下列表：

<div class="col_full toolbar"> 
            <p>CALL NOW: +1 555.555.1234</p>
            <ul class="social-icons">
                <li> <a href="graphics/twitter_icon.jpg" target="_blank">Twitter </a></li>
                <li> <a href="graphics/instagram_icon.jpg" target="_blank"> Instagram</a></li>
                <li> <a href="graphics/facebook_icon.jpg" target="_blank"> Facebook</a></li>
            </ul>
        </div>

在这个例子中，我把高度做得更大，这样你就可以看到链接实际上是在顶部。

如果要查看图像，则需要使用图像标记，如下所示：

<li> <a href="path/to/twitter.com" target="_blank"><img src="path/to/your/twitter_image.jpg"/> </a></li>

JSFiddle

ul列表隐藏在div下

1 个答案: