Html 如何在不移动第一个div的文本的情况下重叠两个div？

我有一个有一些文本的div和另一个在文本div后面有一些隐藏按钮的div，并在需要时向左移动（anitmation）

问题是div中的文本向右移动，以使按钮div不与文本重叠

请点击此处：

如何根据按钮div的宽度/大小/位置使主文本div的文本不相互作用

.a {
    position:relative;
    width:400px;
    height:300px;
    margin:50px 200px;
    background:#000;
    padding:10px;
    color:#fff;
}
.b {
    position:absolute;
    top:10px;
    left:0px;
    width:180px;
    height:290px;
    background:green;
    display:none;
}
.a:hover .b {
    display:block;
    /* left:-150px; */
}

您可以使用div的相对和绝对定位来完成所需的任务

---

尝试为按钮div指定一个z索引

---

z指数：2

尝试将以下内容添加到您的定义中：

overflow:hidden;

---

发布你的工作代码和期望的结果截图我尝试了z索引，但是文本仍然移到了右边。你给你的div定位了吗？？？位置：绝对位置；顶部：--顶部的像素--；左：--左起的像素--；它在JSFIDLE上运行良好，但我不知道为什么，但当我在代码中添加一个位置：绝对时，div会出现在屏幕的左上角，它与JSFIDLE中的第一个div不同。好吧，我的“a”没有相对位置，在本例中，“b”div是相对于top/right的。非常感谢。您必须使其

position:relative

以使子div相对于父div定位，否则它将相对于文档，因此将产生您所说的结果