1

2

3

<!-- html -->

<div class="anchor">??</div>

<p class="positionedElement">This is a positioned element.</p>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

/* 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;

    }

1

2

3

4

5

6

7

8

9

// 可以看到我的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'

    })