html - ul 列表隐藏在 div 下

Question

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

JSFiddle

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