如何在悬停时让 div 覆盖 divs？

Question

我创建了 div，它很稳定。高度及其溢出的内容是隐藏的。但是当我将它悬停时，我想显示所有内容。我做了一些 JSFIDDLE 但所有接下来的 div 都向下移动。我想在悬停时将 div 覆盖到另一个 div，但我不知道该怎么做。请帮忙。

html

<div class="header">
</div>
<div class="container">
    <div class="content">
        </div>
    <div class="button">
        <button>
            Button
        </button>
    </div>
</div>
<div class="space">   
</div>       
<div class="footer">
</div>

css

.header
{
    background-color: violet;
    height: 40px;
}
.container{
    background-color: orange;
    width: 400px;
}
.content{
    background-color: lightblue;
    height: 100px;
    overflow: hidden;
}
.content:hover {
    overflow: visible;
    height: auto;
}
.button{
    background-color: lightgreen;
    text-align: center;
    height: 30px;
}

Answer 1

你可以尝试这样定位（绝对），它是响应它上面的div的位置，但是看一下它下面的div的位置，这样它们就可以重叠了。

.container{
    position:absolute;
}

Answer 2

使用 position 和 z-index 属性如下 -

换两个css类

.container{
    background-color: orange;
    width: 400px;
    position : relative;
    /* height same as that of content. Needed to avoid the jump effect */
    height : 100px;
}

.content:hover {
    overflow: visible;
    position : absolute;
    height : auto;
    z-index:999;
}

如何在悬停时让 div 覆盖 divs？

How to make div covers divs on hover?

html

css

overflow