Html CSS在不影响周围内容的情况下转换div

我正在研究一种使用CSS显示帮助的方法，不需要对话框或弹出窗口

我在一个div中有一个图像，当图像悬停在上面时，它的大小将发生变化，显示帮助内容

我在下面还有一个div，它表示帮助div所在页面的内容。这是我的密码：

HTML:

    <div id="answers" class="answers">
        <img src="images/bullet_question.png" height="50" width="50">
    </div>
    <div class="below">will it push me down?</div>

    div.answers
    {
        height: 50px;
        width: 50px;
        background-color: transparent;
        color: #FFF;
        z-index: 2;

    }

    div.answers:hover
    {
        -webkit-transition: all 1s ease-in-out;
        -moz-transition: all 1s ease-in-out;
        -o-transition: all 1s ease-in-out;
        transition: all 1s ease-in-out;

        height: 400px;
        width: 400px;
        background-color: #333;
        border: 2px solid #000;
        border-top-left-radius: 30px;
        z-index: 2;

    }

    div.below
    {
        z-index: 1;
    }

---

问题是，如何转换答案类div，而不影响下面的类div；把它往下推。正如您所看到的，我对z-index做了一些实验，但没有效果。

您需要另一个div来包装您的图像

HTML

<div id="answers" class="answers">
    <div class="another-div">
        <img src="images/bullet_question.png" height="50" width="50">
    </div>
</div>
<div class="below">will it push me down?</div>

---

所以您希望顶部的div不会影响其下方的div，即使第一个div正在增长？确实如此，是的。现在正在向下推。这对我不起作用，下面的div仍然被向下推。请确保您在答案中的代码与fiddle中的代码相同。在你的例子中，你在操纵类

答案的悬停，在我的例子中，我在操纵新类
另一个div
的悬停效果。你完全正确。我只是照你说的做了，效果很好。谢谢你，Zafar，因为子div转换成父div，这能起作用吗？我很高兴这能起作用，但我对它缺乏了解，这让我很沮丧属性通过不影响其他元素在页面上定位元素，并且该元素可以覆盖在其他元素之上。您需要另一个
div
的原因是，当元素处于绝对位置时，要保持
下方
的原始位置。我不确定我是否能完全表达我的想法，但别担心，当你获得更多经验时，你会开始理解的。
.answers
{
    height: 50px;
    width: 50px;
    background-color: transparent;
    color: #FFF;
    z-index: 2;

}

.another-div:hover
{
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
    position:absolute;
    height: 400px;
    width: 400px;
    background-color: #333;
    border: 2px solid #000;
    border-top-left-radius: 30px;
    z-index: 2;

}

.below
{
    z-index: 1;
    color: red;
}