---
title: "Follow-the-leader pattern with CSS anchor positioning"
url: https://daily.dev/posts/follow-the-leader-pattern-with-css-anchor-positioning-sgbgqkdng
source_url: https://una.im/follow-the-anchor/
type: article
source: "Una Kravets"
published: 2025-09-11T18:25:37.233Z
updated: 2025-09-11T18:25:54.953Z
tags: ["webdev", "javascript", "css", "ui-ux"]
reading_time: 3
upvotes: 4
comments: 0
language: en
---

> ## Documentation Index
> Fetch the complete documentation index at: https://daily.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# Follow-the-leader pattern with CSS anchor positioning

**[Una Kravets](https://daily.dev/sources/una)** · 3 min read · 4 upvotes · 0 comments

## Summary

CSS anchor positioning enables a "follow-the-leader" pattern where a single positioned element dynamically changes its anchor point based on user interactions. The technique involves setting a position-anchor on the follower element and updating the anchor-name property on target elements during hover, focus, or other state changes. Examples include action bars with roving focus indicators and carousel scroll markers that smoothly transition between positions using CSS transitions.

## Full article

daily.dev links to this article rather than hosting it. Read it at the original source: <https://una.im/follow-the-anchor/>

## Similar posts on daily.dev

- [The Basics of Anchor Positioning](https://daily.dev/posts/the-basics-of-anchor-positioning-8tvfbfq60) · Ahmad Shadeed · 3 upvotes · 0 comments

---

Tags: [#webdev](https://daily.dev/tags/webdev), [#javascript](https://daily.dev/tags/javascript), [#css](https://daily.dev/tags/css), [#ui-ux](https://daily.dev/tags/ui-ux)

[View this post on daily.dev](https://daily.dev/posts/follow-the-leader-pattern-with-css-anchor-positioning-sgbgqkdng)