如何使用popper js相对于body而不是parent来定位下拉列表

Popper.js 是一个用于定位弹出元素（如下拉菜单、工具提示等）的 JavaScript 库。默认情况下，Popper.js 会将弹出元素相对于其最近的具有定位属性（position: relative、position: absolute 或 position: fixed）的父元素进行定位。如果你希望将弹出元素相对于 <body> 元素进行定位，而不是相对于其父元素，可以通过设置 Popper.js 的 modifiers 来实现。

基础概念

Popper.js:

是一个轻量级的库，用于创建弹出元素（如工具提示、下拉菜单等）。
它通过计算弹出元素与其参照元素之间的位置关系来定位弹出元素。

Modifiers:

Modifiers 是 Popper.js 中的一个配置选项，用于修改默认行为。
可以通过 modifiers 来改变弹出元素的定位方式、添加偏移量、设置边界等。

类型与应用场景

工具提示：当鼠标悬停在某个元素上时显示详细信息。
下拉菜单：在导航栏或按钮下方显示选项列表。
弹窗：用于显示警告、确认对话框等。

示例代码

以下是一个使用 Popper.js 将下拉列表相对于 <body> 定位的示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Popper.js Example</title>
    <style>
        .dropdown {
            position: relative;
            display: inline-block;
        }
        .dropdown-content {
            display: none;
            position: absolute;
            background-color: #f9f9f9;
            min-width: 160px;
            box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
            z-index: 1;
        }
        .dropdown:hover .dropdown-content {
            display: block;
        }
    </style>
</head>
<body>
    <div class="dropdown">
        <button>Dropdown</button>
        <div class="dropdown-content">
            <a href="#">Option 1</a>
            <a href="#">Option 2</a>
            <a href="#">Option 3</a>
        </div>
    </div>

    <script src="https://unpkg.com/@popperjs/core@2"></script>
    <script>
        const dropdown = document.querySelector('.dropdown');
        const dropdownContent = document.querySelector('.dropdown-content');

        const popperInstance = Popper.createPopper(dropdown, dropdownContent, {
            placement: 'bottom-start',
            modifiers: [
                {
                    name: 'offset',
                    options: {
                        offset: [0, 8],
                    },
                },
                {
                    name: 'preventOverflow',
                    options: {
                        boundary: 'viewport',
                    },
                },
                {
                    name: 'flip',
                    options: {
                        fallbackPlacements: ['top-start', 'left-start', 'right-start'],
                    },
                },
                {
                    name: 'computeStyle',
                    options: {
                        gpuAcceleration: false,
                    },
                },
            ],
        });
    </script>
</body>
</html>