css - 纯 CSS 悬停框移动页面文本

Question

严格使用 CSS，我正在尝试制作一个描述框。到目前为止，一切都很好，看起来很棒。但是有一个问题。将鼠标悬停在上方时，它会四处移动页面的其余部分，以便为最初放置框腾出空间。将鼠标悬停在触发文本上时，如何让页面上的所有文本保持静态？ 此外，我使用的是 Drupal、Danland 主题，但我认为在特定情况下这不会产生任何影响。

    <style>
    span{
    background:#F8F8F8;
    border: 5px solid #DFDFDF;
    color: #717171;
    font-size: 13px;
    letter-spacing: 1px;
    line-height: 30px;
    position: relative;
    text-align: center;
    text-transform: uppercase;
    top: -200px;
    left:-30px;
    display:none;
    }
        span:after{
    content:'';
    position:absolute;
    bottom:-10px;
    width:10px;
    height:10px;
    border-right:5px solid #dfdfdf;
    border-bottom:5px solid #dfdfdf;
    background:#f8f8f8;
    left:31%;
    margin-left:-10px;
    -moz-transform:rotate(45deg);
    -webkit-transform:rotate(45deg);
    transform:rotate(45deg);
    display:inline;
    }
        p{
    margin:10px;
    float:left;
    position:relative;
    cursor:pointer;
    overflow:visible;
    }

        p:hover span{
    display:block;
    }</style>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<p>Angkor Wat<span><img width="300" src="http://www.lotusangkortravel.com/themes/danland/images/slideshows/angkor-wat.JPG"><br>
Angkor Wat central complex</span></p>
<br><br><br>
<b>This text should not move on hover.</b>

Answer 1

问题是垃圾邮件的position:relative。我将位置更改为绝对位置并且有效。

position: absolute;