Anchor Positioning Just Don't Care About Source Order

Imagine ten divs entering a bar, needing seats but facing a shortage. To solve this, let's place the tenth div on top of the second. Traditional methods require rearranging the HTML to place them adjacent, impacting source order. However, anchor positioning offers a cleaner solution.

The Traditional Approach (and its limitations):

Initially, the divs are ordered sequentially:

<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>

To visually layer div 10 over div 2, we might nest them:

<div>1</div>
<div>
  2
  <div>10</div>
</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>

This necessitates CSS positioning tricks to overlay div 10 perfectly.

Anchor Positioning: A More Elegant Solution

Anchor positioning simplifies this dramatically. We retain the original, sequential HTML:

<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>

The magic happens in the CSS. We designate div 2 as an anchor:

.parent {
  anchor-name: --anchor;
}

Then, we link div 10 to this anchor and position it:

.child {
  position-anchor: --anchor;
  position-area: center;
  width: anchor-size(width);
}

This elegantly overlays div 10 onto div 2, irrespective of their HTML order. The anchor-size() function ensures div 10 perfectly covers div 2. This separation of content and presentation is a key advantage, highlighting the power and elegance of anchor positioning. Note that anchor positioning is currently supported primarily in the latest versions of Chrome.

The above is the detailed content of Anchor Positioning Just Don't Care About Source Order. For more information, please follow other related articles on the PHP Chinese website!