CSS дисплей inline-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, а затем расположить этот элемент абсолютно так, как показано на следующих спинетах.

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>