html - CSS图像悬停推动页面中的其他元素？

Question

当图像悬停时，350px它会推动周围的一切。

这段代码正在工作，除了当我悬停并且图片增长时，它会推动菜单或向下移动。

我怎样才能阻止这个？

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

    height: 350px;

}

顺便说一句，我正在使用 twitter bootstrap 并且我已经尝试过position: absolute;。有没有办法在悬停时仍然增加大小但不推动什么也不移动。

Answer 1

Set the height of #displaycar (the presumed parent div) to 200px and add overflow: visible;

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

Answer 2

我会在元素上使用 z-index 。在初始布局上保持值相等，但在悬停时使其值更强（置于前面）

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

注意：要使用 z-index，您必须使用位置值之一

Z-index 优先考虑重叠的元素（放在前面/放在后面）

这是有关该主题的更多信息

Answer 3

这是可能的，但为了避免影响周围的内容，必须从文档流中删除元素本身；这是最容易实现的position: absolute，但不幸的是这需要使用包装元素，with position: relative（或任何其他非static position值）。包装元素必须定义宽度和高度，这可以自动完成（使用 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 小提琴演示。