html - 在 CSS 中使用图层并使图像显示在菜单前面的方法

Question

我有一个菜单

但想得到这样的结果

到目前为止，我有这个：

<div id="bottomnav">
    <ul>
        <li>

<a  href="#" target="_blank" title="lamp">
    <img class="swing" src="http://site.cheetos.com.br/static/masterbrand/img/cap1-poste.png" width=250 height=350 style="z-index: 10"  /> 
</a>            


        </li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
    </div>

我添加了z-index，但是我做错了，将图像放在菜单上方可以做什么？请看一下小提琴

Answer 1

在固定页脚中对齐多个图像

你想要这样的东西：

#bottomnav{
    width: 100%;
    height: 50px;
    background: no-repeat url(http://eurekavi.com/barraroja.png);
    background-size: 100% 100%;
    position: absolute;
    bottom: 0px;
}

#bottomnav ul {
    width: inherit;
    height: inherit;
    list-style: none;
}

#bottomnav ul li {
    width: 25%;
    height: inherit;
    position: relative;
    float: left;
    outline: 1px solid yellow;
}

#bottomnav li img {
    position: absolute;
    bottom: 0;
    left: 0;
}

你的 HTML 看起来像这样：

<ul>
    <li>
       <a  href="#" target="_blank" title="lamp"><img ...  /> </a>            
    </li>
    <li>
       <a  href="#" target="_blank" title="lamp"><img ...  /> </a>            
    </li>
    <li>
       <a  href="#" target="_blank" title="lamp"><img ...  /> </a>            
    </li>
</ul>

小提琴：http: //jsfiddle.net/audetwebdesign/s5GNA/

一些解释

您的bottomnav父容器绝对位于底部，这很好。

对于uland li，继承高度以便从元素底部的位置中排除猜测工作（当您浮动内容时，高度将折叠否则）。

对于li，您必须将位置设置为相对并将它们向左浮动。

最后，将图像的左下角绝对定位到 0。

如果可以的话，使您的图像具有相同的尺寸并调整灯座，使它们具有共同的基线，否则，您需要调整bottom: {n}px每个图像的设置，其中“{n}”是通过试验找到的某个数字和错误。