How can I control the position of the sources in Webflow so that they pop up just above their respective superscripted numbers?

Published on
September 22, 2023

To control the position of the sources in Webflow so that they pop up just above their respective superscripted numbers, you can use a combination of CSS and Webflow's custom code capabilities. Follow these steps to achieve the desired positioning:

  1. Add a Superscript Component: Start by adding a superscript component to the content where you want the source numbers to appear. You can do this by encasing the number or text you want to superscript within a <sup> tag. For example, <sup>1</sup> would make the number "1" appear as a superscript.

  2. Add a Div Block: Next, wrap the superscript component within a div block using Webflow's Designer interface. This div block will act as the container housing the source content.

  3. Set Div Block Position: Select the div block and navigate to the Setting tab on the right sidebar. Within the Position section, choose the desired position option. For example, if you want the source to appear just above the respective superscript number, you can choose "Relative" position.

  4. Adjust Div Block's Top Margin: Still within the Setting tab, scroll down to the Margin section. Here, you can adjust the top margin value to move the div block vertically and position it precisely above the superscript number. Use positive values to move it up and negative values to move it down.

  5. Custom Code Overrides: By default, Webflow sets the position:relative property on the div block. However, to control the positioning more precisely, you may need to override the default CSS. To do this, select the div block and go to the Custom Code section in the right sidebar. Add a new line of CSS code for the div block's class and set the desired position property. For example:

    ```css
    .my-div-block {
    position: absolute;
    top: -20px;
    }
    ```

    Adjust the class name (.my-div-block) and top value (-20px) according to your specific setup.

  6. Preview and Adjust: Finally, preview your site and make any necessary adjustments to the div block's positioning or the superscript styling until you achieve the desired result.

By following these steps, you can easily control the position of the sources in Webflow, ensuring that they pop up just above their respective superscripted numbers.

Additional Questions:

  1. How do I add superscript numbers in Webflow?
  2. Can I customize the positioning of elements in Webflow?
  3. Is it possible to use custom CSS code in Webflow?