位置：相对于另一个div绝对不起作用

Question

我有以下html代码：

<div class="dealItemOptionsStoreaddressContainer">
    <button class="dealItemOptionsStoreAddress dealItemStoreAddress" type="button" data-dealid=<?php echo $dealItem['id']; ?>>
        <svg class="dealItemOptionsStoreAddress__svg" viewBox="0 0 512 512">
            <path d="M256,0C153.755,0,70.573,83.182,70.573,185.426c0,126.888,165.939,313.167,173.004,321.035
            c6.636,7.391,18.222,7.378,24.846,0c7.065-7.868,173.004-194.147,173.004-321.035C441.425,83.182,358.244,0,256,0z M256,278.719
            c-51.442,0-93.292-41.851-93.292-93.293S204.559,92.134,256,92.134s93.291,41.851,93.291,93.293S307.441,278.719,256,278.719z"/>
        </svg>
        <span class="dealItemOptionsStoreAddress__text"><?php echo $dealItem['store_address']; ?></span>
    </button>
    <div class="dealItemOptionsStoreaddressContainer__map"></div>
</div>

这是SCSS（css）代码：

.dealItemOptionsStoreaddressContainer {
    grid-column: 5 / span 1;
    grid-row: 5 / span 1;
    overflow-x: hidden;
    display: flex;
    justify-content: flex-end;
    position: relative;

    &__map {
        display: block;
        position: absolute;
        top: 25px;
        width: 100%;
        height: 150px;
        box-shadow: 0 2px 8px -5px black;
        border: 7px solid map-get($webColors, 'button-red');
    }
}

.dealItemOptionsStoreAddress {
    background-color: map-get($webColors, 'button-red');
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    padding: 7px 12px;
    cursor: pointer;
    overflow-x: hidden;

    &:hover {
        background-color: map-get($webColors, 'light-button-red');
    }

    &__svg {
        fill: white;
        height: calc(12px + 0.2vw);
        min-width: calc(12px + 0.2vw);
        margin-left: 5px;
    }

    &__text {
        color: white;
        font-size: calc(10px + 0.3vw);
        white-space: nowrap;
        overflow-x: hidden;
        text-overflow: ellipsis;
    }
}

我对position: absolute做过<div class="dealItemOptionsStoreaddressContainer__map"></div>，对position: relative做过<div class="dealItemOptionsStoreaddressContainer">，但这就像没有按应有的方式工作一样。浏览器显示了这些{{1 }}，因为内部div和外部div根本没有div。

在图片中，您可以看到浏览器将内部div放在下面，而不是使用position。

但是，我希望看到：