Lost: pointer for speech bubble

Here 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;
    }
    #box:after
    { 
       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);
    }
    to
    {
        -webkit-transform:rotate(360deg);
    }
    }
    </style>
    </head>
    <body>
    <center>
    <div id="box">
     xyz <br/>
     yzx <br>
    </div>
    </center>
    </body>
    </html>

My issue is that the speech bubble pointer only appears when the myrotate animation is enabled. It disappears when the animation is disabled. As a newbie to CSS3 and HTML5, can someone please explain this behavior?

Answer №1

Include the following in your CSS:

#container {
    position: relative;
}

Elements with an absolute position will only be placed relative to the closest parent element that has a position other than the default (static). If no parent elements have a non-static position, then the positioning will be based on the viewport.

It seems that when an element is animated, the browser does not treat it as if it were statically positioned anymore.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The proper method for incorporating a hover effect using CSS

Currently, I am facing an issue with integrating a hover effect to an image using CSS. The problem arises when the hover area is not aligned properly and the effect triggers even when the mouse is not directly over the image. <body> <div id=&apos ...

What is preventing the click function on a dynamically created button from being executed in jQuery?

Take a look at this jsFiddle where I illustrate my issue. Whenever I click on the "Add an ingredient" button, the button click event is triggered. My issue arises when I click on the "Create a subtitle" button because it dynamically creates "Add an ingredi ...

Can the style of certain words within a paragraph be altered using CSS only, without the need for any HTML tags?

Is it feasible to alter the appearance of certain words within a paragraph using CSS solely, without applying any HTML tags to those particular words? Awaiting a positive response. Thank you! ...

Conceal the bottom HTML/widget and eliminate the Drag & Drop functionality from the Streamlit file_uploader() feature

I have developed an application using Streamlit that requires the ability to read multiple files simultaneously. To achieve this, I am utilizing the file_uploader() component with the parameter accept_multiple_files=True. I have two queries: Firstly, is ...

The use of .hidden in Tailwind-CSS does not result in the application of flex or block styles to the element

My intention is to hide the div on small screens and display it on larger screens starting from md: However, it seems like the .hidden class has a higher priority or may be interfering with some of my dependencies. <div className="hidden md:flex&qu ...

What is the most effective method for dynamically showcasing buttons in AngularJS?

Hello all, I'm currently learning AngularJS and I was wondering if anyone could recommend the simplest and most effective method for dynamically displaying links from AngularJS to HTML. I am looking to display a variable number of buttons in my HTML ...

Manipulating the DOM by nesting an icon within a button element in HTML

Currently working on my todo list project and I have a question about using innerHTML. I'm curious if I can include an icon inside of a button tag like this: btn.innerHTML = '<i class="fas fa-times fa-lg"></i>'; So, wo ...

Get user input from a textbox and use that input to conduct a search on Google

Hi there, I'm currently working on solving this particular problem. I'm attempting to create a HTML page using a form where the user can input a keyword and click on the "Search" button to search for that keyword on Google. I haven't had a ...

Combine the click event and onkeydown event within a single function

I have a function that sends a message when the Enter key is pressed. However, I also created a button to send a message, but when I call this function, the message doesn't send, even though I added a click event. function inputKeyDown(event, input ...

Using an HTML img tag without success, despite having the correct link

My HTML img tags are not working even though the link is correct. I have been attempting to resolve this issue for quite some time by researching multiple websites and trying various solutions, but unfortunately, nothing seems to be working. All I want i ...

Verifying the number of div elements within an if condition

I've been attempting to determine the number of div elements in my DOM. However, when I try to assign this count to a variable, it displays as undefined in the console. Strangely, when I utilize an alert, it correctly shows the value as "8". My goal ...

Having difficulty creating a simple HTML menu, where one button is visible but the other is unresponsive despite having identical CSS styling

Looking to enhance my HTML skills as a beginner, I've begun building a simple website and am currently focusing on the menu. I created a "home" button (which is visually there but not functional), and then attempted to create another button next to it ...

Numerous Selection Boxes

I came across this code snippet on the web. How can I insert the output into an email? Usually, I follow this format: $name = $_POST['name']; $email_body = "$name"; I want to incorporate the output of this code into my $email_body variable. Is ...

Connect a responsive div to a main div

I'm relatively new to the world of Javascript, CSS, and HTML. Currently, I'm attempting to anchor a div to the center and bottom of its parent div. The parent div contains a responsive background image and my fa fa-arrow icon is correctly positi ...

Update the icon using CSS style properties

I have been using liqour-tree and I need to change the arrow icon to a custom one. Unfortunately, I am not sure how to do this. Can someone please help me out? I have identified the element tag where the icon is placed. <i class="tree-arrow expanded ha ...

When trying to change the audio source using jQuery, HTML audio is having trouble locating the

In my .html file, I have an audio element that looks like this: <audio id ="captcha"> <source id = "capt_wav" src = "doghouse.wav" type = "audio/wav" > </audio> It successfully plays the audio. However, now I need to dynamically ...

When attempting to add an image to a table, I struggle to do so without disrupting the alignment of the surrounding cells

I'm having an issue with adding an image to my table. Whenever I place the img tag between the <td> tags, the content in the neighboring cell behaves as if there are <br> tags above it. I attempted to use display:inline-block, but it had ...

An error has occurred: sendEmail function is not defined

There seems to be a simple issue here that needs my attention before diving into PHP tasks. I plan on using PHPMailer this time around. I've been attempting to learn how to submit a form on localhost for the past week, and now I'm going to try i ...

Enhancing the appearance of individual cells in jQuery DataTables

While working with jQuery DataTables, I have successfully managed to access row data and apply styling to the entire row. Below is the code snippet used to initialize the datatable: var $dataTable = $('#example1').DataTable({ "data": data, ...

Changing the Image Source in HTML with the Power of Angular2

Despite my efforts, I'm unable to display the updated image in my HTML file. In my TypeScript file, the imageUrl is updating as expected and I've verified this in the console. However, the HTML file is not reflecting these changes. In my researc ...