CSS дисплей встроенный блок и г-индекс

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>

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>