CSS Anchor Positioning重新定义锚点定位的时代来临(最新推荐)

<!-- html -->
<div class="anchor">⚓︎</div>
<p class="positionedElement">This is a positioned element.</p>

/* css */
:root {
      --anchor-width: 60px;
      --anchor-height: 90px;
    }
    .anchor {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      // 主要实现部分！
      anchor-name: --infobox;
      background: palegoldenrod;
      font-size: 3em;
      width: var(--anchor-width);
      height: var(--anchor-height);
      border: 1px solid goldenrod;
      text-align: center;
    }
    .positionedElement {
      display: none;
      position: absolute;
      // 主要实现部分！
      position-anchor: --infobox;
      margin: 0;
      top: anchor(top);
      left: anchor(right);
      bottom: anchor(bottom);
      background-color: olive;
      transform: translate(calc(var(--anchor-width)/2 * -1), calc(var(--anchor-height)/2 * -1));
      border: 1px solid darkolivegreen;
    }

// 可以看到我的js中没有任何的关于位置计算的代码！
const tip = document.querySelector('.positionedElement')
    const anchor = document.querySelector('.anchor')
    anchor.addEventListener('mouseenter', () => {
      tip.style.display = 'block'
    })
    anchor.addEventListener('mouseleave', () => {
      tip.style.display = 'none'
    })