Question

以下是我写的html代码

<!DOCTYPE html>
    <html>
    <head>
    <style type="text/css">
    #box
    {
        width: 200px;
        height: 250px;
        border-radius: 15px;
        background-color: pink;
        border-color: red;
        border-style: solid;
        display: block;
        -webkit-animation: myrotate 3s infinite; /* animation enabled */
    }
    #box:after /* not working if animation is disabled*/
    { 
       content:"";
       display:block;
       position:absolute;
       bottom:-15px;
       left:20px;
       width:0;
       border-width:15px 25px 0;
       border-style:solid;
       border-color:#13961c transparent;
    }

    @-webkit-keyframes myrotate
    {
    from 
    {
        -webkit-transform:rotate(0deg); /* Safari and Chrome */
    }
    to
    {
        -webkit-transform:rotate(360deg); /* Safari and Chrome */
    }
    }
    </style>
    </head>
    <body>
    <center>
    <div id="box">
     xyz <br/>
     yzx <br>
    </div>
    </center>
    </body>
    </html>

问题是只有在启用动画 myrotate 时才会出现语音气泡指针。如果它被评论指针消失。我是css3和html5的新手。请解释一下。

Answer 1

将此添加到CSS：

#box {
    position: relative;
}

具有位置absolute的元素将仅相对于也具有非默认位置（static）的最近父级或者如果父级都没有非静态位置，然后在视口中确定位置。

我怀疑当一个元素被动画化时，浏览器不再将其视为静态定位对象。

讲话泡泡指针丢失

1 个答案: