CSS display inline-block and 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元素中创建一个元素，然后像下面的尖尖一样放置这个元素。

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>

Answer 2

您应该在li.hover类中添加绝对位置

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
}

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