CSS显示内联块和z索引

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.hover class

中添加绝对位置

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

你应该在你的li元素中创建一个元素，然后将该元素完全放在下面的spinets中。

＆＃13;

＆＃13;

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%;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;