In Webflow, how can I position a <marquee> element like a normal div or HTML component?

Published on
September 22, 2023

To position a <marquee> element in Webflow like a normal <div> or HTML component, you can follow these steps:

  1. Add the <marquee> element: Drag and drop an HTML Embed component onto your page where you want the <marquee> element to appear.

  2. Customize the <marquee>: Open the settings for the HTML Embed component by double-clicking on it or selecting it and clicking the settings icon. In the settings panel, you can add your <marquee> code within the <style> tag. For example:
    ```html

    ```

  3. Positioning the <marquee>: To position the <marquee> element, you can use CSS properties like position, translate, top, left, etc.

  • Apply the position property to specify the positioning type. For example, use position: relative to position the <marquee> element relative to its normal position, or position: absolute to position it relative to its nearest positioned ancestor.
  • Use the top and left properties to specify the exact position of the <marquee> element. For example, you can use top: 50px and left: 50px to position it 50 pixels from the top and left of its parent container.
  • You can also use CSS properties like transform (translate, rotate, etc.), margin, padding, and other positioning properties to achieve the desired position.

Here's an example of how you can position a <marquee> element using CSS properties:

<style>marquee {  position: relative;  top: 50px;  left: 50px;}</style>

Remember to place your <marquee> code within the <style> tag and adjust the CSS properties based on your specific requirements.