Появление блока без сдвига нижних

#html #css #hover #position

Имеется следующая разметка:



.container {
  width: 200px;
}

.container .item {
  text-align: center;
  margin-bottom: 10px;
}

.container .item .title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.container .item .button {
  display: none;
}

.container .item:hover .title {
  white-space: normal;
}

.container .item:hover .button {
  display: block;
}

  

    
Длинный длинный длинный заголовок товара
    
12345.67 USD
    

      Купить
    
  

  

    
Длинный длинный длинный заголовок товара
    
12345.67 USD
    

      Купить
    
  

  

    
Длинный длинный длинный заголовок товара
    
12345.67 USD
    

      Купить
    
  





https://jsfiddle.net/5cfwb5bu/

Задача: сделать так, чтобы по ховеру на .item отображался полный заголовок и кнопка,
но при этом нижестоящие блоки .item не должны сдвигаться вниз. 

Знаю про position: absolute, но не пойму как правильно применить.
    

Ответы

Ответ 1

Можно сделать так: т.к. кол-во изначально видимого контента известно, можно задать
блокам фиксированную высоту, а все его содержимое поместить в еще один контейнер -
таким образом по ховеру "новый" контент не будет двигать нижестоящие блоки. И никаких
position:absolute не нужно.



.container {
  width: 200px;
}

.container .item {
  text-align: center;
  margin-bottom: 10px;
  position: relative;
  height: 2em;
}

.container .item .hover {
  background: #fff;
}

.container .item .title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0;
}

.container .item .button {
  display: none;
}

.container .item:hover {
  z-index: 1;
}

.container .item:hover .hover {
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2);
}

.container .item:hover .title {
  white-space: normal;
}

.container .item:hover .button {
  display: block;
}

  

    

      
Длинный длинный длинный заголовок товара
      
12345.67 USD
      

        Купить
      
    
  
  

    

      
Длинный длинный длинный заголовок товара
      
12345.67 USD
      

        Купить
      
    
  
  

    

      
Длинный длинный длинный заголовок товара
      
12345.67 USD
      

        Купить
      
    
  



Ответ 2

Можно сделать абсолютное позиционирование для item при hover и сдвигать нижний блок
на нужную высоту прошлого блока.



.container {
  width: 200px;
  /* для абсолютное позиционирование относительно данного контейнера */
  position: relative;
}

.container .item {
  text-align: center;
  margin-bottom: 10px;
}

.container .item .title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.container .item:hover {
  /* абсолютное позиционирование */
  position: absolute;
  /* просто для демонстрации */
  background-color: red;
}

/* сдвигаем нижний блок на нужное расстояние */
.container .item:hover + .item {
  padding-top: 60px;
}

.container .item .button {
  display: none;
}

.container .item:hover .title {
  white-space: normal;
}

.container .item:hover .button {
  display: block;
}

  

    
Длинный длинный длинный заголовок товара
    
12345.67 USD
    

      Купить
    
  

  

    
Длинный длинный длинный заголовок товара
    
12345.67 USD
    

      Купить
    
  

  

    
Длинный длинный длинный заголовок товара
    
12345.67 USD
    

      Купить