Как заставить элемент перекрывать соседние?

Question

[Viktor Vsk]

Как реализуется, например, вот это:
rozetka.com.ua/notebooks/c80004/filter/preset=netbooks

Там же в коде нашел:

.gtile-wrap{
  position:relative;
  float:left;
  width:18em;
  height:35em;
  margin-bottom:1em
}

.gtile{
  overflow:hidden;
  position:relative;
  z-index:5;

}

.gtile:before{
  content:'';
  display:block;
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  z-index:6;

}

.gtile:hover{
  overflow:visible;
  position:relative;
  z-index:10 !important
}

.gtile:hover .description{
  z-index:11 !important;
  max-height:none
}

.gtile:hover:before{
  display:none
}

Но как-то не получается сложить все вместе.

Имеется ввиду, при наведении на элемент (товар в данном случае), увеличивается рамка. Очевидные способы скрытия части блока приводят к тому, что или в нераскрытом состоянии остается полная высота, или же при наведении нижние блоки не перекрываются, а спускаются вниз

Answer 1

[Виталий Киренков]

Ну, всё правильно нашли. И чего не складывается?

codepen.io/vitaliy_kirenkov/pen/Lfhin - краткий пример реализации.

Comments

[Viktor Vsk]

jsfiddle.net/6xcDL/1 вот что получается, например

[Viktor Vsk]

Нужно, что бы при наведении на блок, все оставалось на своих местах, но этот блок менял свое содержимое, следовательно, и высоту

[Виталий Киренков]

@victorvsk посмотрите внимательно мой код.

[Viktor Vsk]

@DeLaVega Не могу понять: навожу на элементы, ничего не происходит. Добавил в свой вариант overflow: visible и z-index, но результата нет (jsfiddle.net/6xcDL/2/). Как добиться, что б при наведении на 1,2,3 - 4 и 5 оставались на своих местах ?

[Viktor Vsk]

Точнее, желательно в таком варианте - jsfiddle.net/6xcDL/3 - без флоата, инлайн-блоками

[Виталий Киренков]

@victorvsk jsfiddle.net/6xcDL/5
Даже не знаю куда ещё понятней...

[Виталий Киренков]

Суть в том, что у вас флоутятся или подряд идут блоки фиксированного размера. Ну а то что внутри - прячется, а по ховеру показывается.

[Viktor Vsk]

@DeLaVega здесь понятно, спасибо

[Viktor Vsk]

@DeLaVega только теперь другой вопрос: если высота фиксированная, то как сделать, что б скрытые элементы "растягивали" блок предка? jsfiddle.net/6xcDL/6

[Виталий Киренков]

@victorvsk jsfiddle.net/6xcDL/8
?

[Viktor Vsk]

@DeLaVega да, оно, всегда забываю про все иннеры и врапперы, благодарю еще раз!

[Виталий Киренков]

Нзч.

Answer 2

[Денис]

это абсолютное позиционирование. Сперва вычисляются элементы, а затем им придаются абсолютные координаты.

Ну это одно из решений. Так работает например masonry

Comments

[Viktor Vsk]

Абсолютным позиционированием не могу понять, как сделать так, что б соседние элементы остались на своих местах - получается, что соседний попадает на место того, на который наводишь

[Виталий Киренков]

А ещё какие варианты есть это усложнить?)

[Денис]

@DeLaVega где ж вы раньше были ? :-))) уе.....стал верстать по незнанию :-)

Answer 3

[Сергей Протько]

htmlbook.ru/blog/ponyatie-potoka
www.webremeslo.ru/css/glava12.html
www.puzzleweb.ru/css/12_positioning.php