Positioned Arrows

Absolute Positioning

Use position="absolute" to place arrows at specific document coordinates. The arrow scrolls with the page.

{{< arrow from="750,80" to="950,20" control1="900,100" color="hotpink" width="3" position="absolute" >}}

Look at the top-right corner of this page to see a hotpink arrow!

Scoped Positioning

Use a position: relative container to scope absolute arrows.

::: {style="position: relative; height: 200px;"}
Content here...
{{< arrow from="50,50" to="300,150" control1="175,20" color="purple" position="absolute" >}}
:::

This box has position: relative, so the arrow is positioned within it.

Multiple Positioned Arrows

{{< arrow from="30,40" to="150,40" color="red" position="absolute" >}}

{{< arrow from="30,80" to="200,120" control1="115,40" color="blue" position="absolute" >}}

{{< arrow from="30,120" to="250,180" control1="80,200" control2="200,100" color="green" position="absolute" >}}

Combine multiple arrows for complex annotations.

Annotations Example

{{< arrow from="400,30" to="280,50" control1="350,20" color="crimson" width="2" position="absolute" >}}

{{< arrow from="400,80" to="180,95" control1="300,120" color="steelblue" width="2" position="absolute" >}}

Important Concept

This is some text that we want to annotate with arrows pointing to key parts.

Fixed Positioning (Demo)

Fixed positioning keeps the arrow in place while scrolling. Uncomment to test:

{{< arrow from="50,50" to="150,100" color="orange" position="fixed" >}}

Note: Fixed arrows stay visible as you scroll, which can be useful for persistent callouts but may also be distracting.