Как сделать, чтобы div внутри другого div не влиял на него?

у меня есть header, я хочу сделать меню при открытии в будущем, с использованием javascript. Но мне для начало нужен блок, позиция которая будет такая же, как и позиция иконки с корзиной. Вот код:

<hader id="header">
    <nav class="navbar navbar-expand-lg navbar-dark">
        <div class="container d-flex">
            <a class="navbar-brand" href="/"><img src="../../favicon.png" alt="Hi-Tech наушники" width="100px"></a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navContent" aria-controls="navContent" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse flex-row-reverse" id="navContent">
                    <ul class="nav">
                        <li class="nav-item ">
                            <a class="nav-link text-uppercase" href="../../#catalog">Каталог</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link text-uppercase" href="../../onas">О нас</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link text-uppercase" href="../../#contact">Контакты</a>
                        </li>
                        <?php if($_COOKIE['user'] == ''): ?>
                        <li class="nav-item">
                                <a href="../../authorization" class="nav-link voititext text-uppercase text-warning" style="text-decoration: none; font-weight: 900;">
                                    Войти
                                </a>
                        </li>
                        <?php else: ?>
                            <li class="nav-item">
                                    <a href="../../kabinet" class="nav-link voititext text-uppercase text-warning" style="text-decoration: none; font-weight: 900;">
                                        Личный кабинет
                                    </a>
                            </li>
                        <?php endif; ?>
                        <li>
                            <a class="nav-link" style="">
                                <i class="fa fa-shopping-basket" aria-hidden="true" style="color: white; font-size: 20px;"></i>
                                <div style="position: ???; height: 500px; width: 300px; background: white;"></div>
                            </a>
                        </li>
                    </ul>
            </div>

        </div>
    </nav>
</hader>

пробовал позицию абсолютную, но блок просто перемещался вначало страницы, а мне надо чтобы его положение было под корзиной. Вот сайт: hi-tech-online.ru, можете посмотреть как оно сейчас выглядит