CSS 显示内联 block 和 z-index

Question

我有这个测试

CSS:

ul li {
    position:relative;
    width:50px;
    height:50px;
    display:inline-block;
    border:solid 1px black;
    z-index:1;
    vertical-align:top;
}
li.hover {
    border:solid 1px red;
    height: 70px;
    z-index:2;
}

和 HTML:

<ul>
    <li></li>
    <li></li>
    <li></li>
    <li class="hover"></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

http://jsfiddle.net/b6oumwf5/

我想让红色元素覆盖黑色元素，以保持两行之间的边距。但是现在红色只是让第二行向下移动。有没有可能实现我的想法？

Answer 1

您应该在 li 元素内创建一个元素，然后完全像以下 spinets 一样定位该元素。

ul li {
    position:relative;
    width:50px;
    height:50px;
    display:inline-block;
    border:solid 1px black;
    z-index:1;
    vertical-align:top;
}
li.hover{
    border: none;
}
span.abs {
    border:solid 1px red;
    height: 70px;
    z-index:2;
    position: absolute;
    width: 100%;
}

<ul>
    <li></li>
    <li></li>
    <li></li>
    <li class="hover"><span class="abs"></span></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
     <li></li>
    <li></li>
</ul>