CODEWITHSUNDEEP
htmlcss
nbbk
nbbk

Reputation: 1102

speech bubble pointer missing

following is the html code i have written

<!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>

the problem is the speech bubble pointer appears only when animation myrotate is enabled. If it is commented the pointer disappear. I am new to css3 and html5. please explain.

Upvotes: 1

Views: 189

Answers (1)

kumarharsh
kumarharsh

Reputation: 19629

Add this to the CSS:

#box {
    position: relative;
}

The elements which have a position absolute will only be positioned with respect to the closest parent which also has a position other than the default (static) or if none of the parents have a non-static position, then the position is determined wrt the viewport.

I suspect when an element is animated, the browser doesn't treat is as a statically positioned object anymore.

Upvotes: 1

Related Questions