使用时如何将div与div重叠：悬停？

Question

我一直在网上搜索，但找不到任何东西。

我有这三个div，当我将鼠标悬停在第一个或第二个div上时，它会移动div的下方。我希望div重叠而不是移动它。

我的HTML代码如下所示：

<div class="test">First
    <div>
        IP: 0.0.0.0<br>
        LOCATION: Place<br>
    </div>
</div>

<class="test">Second
    <div>
        IP: 0.0.0.0<br>
        LOCATION: Place<br>
    </div>
</div>

<div class="test">Third
    <div>
        IP: 0.0.0.0<br>
        LOCATION: Place<br>
    </div>
</div>

我的CSS代码：

.test{
background-color:green;
text-align:center;
border:1px solid black;
margin:5px;
padding:5px;
width:100px;
font-family:Courier;
}

.test div{
display:none;
text-align:left;
}

.test:hover div{
display:block;
word-wrap: break-word;
}

Answer 1

您必须使用position:absolute;并将要显示的div重叠为绝对位置。

.test div{
display:none;
position: absolute;
top: ...px;
left: ..px;
text-align:left;
}