Шаблон изображения CSS нажимает на страницу другие элементы?

Question

Когда изображение растет с зависанием до 350px, он толкает все вокруг.

Этот код работает, за исключением того, что когда я наводил курсор, и изображение увеличивалось, оно толкает меню или что-то еще вниз.

Как я могу остановить это?

#displaycar img 
{ 
    height: 200px; 
} 
#displaycar img:hover 
{ 

    height: 350px; 

} 

BTW Я использую Twitter Bootstrap и я попытался position: absolute;. Есть ли способ увеличить размер при наведении курсора, но не нажимать ничего, ничего не двигать.

Answer 1

Установите высоту #displaycar (предположительно родительского div) на 200px и добавьте переполнение: visible;

#displaycar { 
    height: 200px; 
    overflow: visible; 
} 

Answer 2

Я бы использовал z-индекс для элементов. сохранять значения, равные по исходной схеме размещения, но сделать его более сильным (на передний план) значение при наведении

#displaycar img:hover 
{ 
    z-index:[stronger value]; 
    height: 350px; 
    position :[relative, absolute, fixed]; 
} 

Примечание: использовать Z-индекс, вы должны использовать один из значений положения

Z-индекс отдает приоритет перекрывающихся элементов (на передний план/привести к спине)

here немного больше информации по этой теме

Answer 3

это возможно, но чтобы избежать влияния окружающего содержимого сам элемент должен быть удален из f низкий уровень документа; это проще всего сделать с использованием position: absolute, хотя, к сожалению, для этого требуется использовать оберточный элемент с position: relative (или любым другим значением, отличным от staticposition). Элемент wrapping должен иметь определенную ширину и высоту, что может быть сделано автоматически (с помощью JavaScript или PHP (среди многих других опций)).

Например, HTML:

<span> 
    <img src="http://placekitten.com/400/400/" /> 
</span> 
<p><!-- generic dummy content, excised for brevity --></p> 

И CSS:

span { 
    display: inline-block; 
    position: relative; 
    width: 150px; 
    height: 150px; 
} 

span img { 
    position: absolute; 
    top: 0; 
    left: 0; 
    height: 150px; 
    width: 150px; 
    /* Vendor-prefixes removed, for brevity */ 
    transition: all 1s linear; 
} 
span:hover img { 
    width: 400px; 
    height: 400px; 
    /* Vendor-prefixes removed, for brevity */ 
    transition: all 1s linear; 
} 

JS Fiddle demo.