我正在嘗試定位。按鈕-手機和手機屏幕下方的項目。底部物品應該在它的上面。此外，每當我刪除項目，它也應該調整降檔或升檔。如何在不重組現有HTML的情況下實現這一點？我已經嘗試使用flexbox的order屬性，但它似乎不能按預期工作。

超文本標記語言

<div class="mobile-look">
    <div class="top-items">
        <div>
            <div class="heading-items">
               {{!-- Heading --}}
              <h1>Heading</h1>
            </div>
            <div class="button-items">
                {{!-- Buttons --}}
                <button>Button Here</button>
            </div>
        </div>
    </div>


    <div class="bottom-items">
        <div class="bottom-item-container">
            <div class="bottom-item-content">
                {{!-- Item Content --}}
                <h1>Item content</h1>
            </div>
        </div>
    </div>
</div>

半鑄鋼?鋼性鑄鐵(Cast Semi-Steel)

.mobile-look {
    display: flex;
    flex-direction: column;
}

.heading-items {
  order: 3;
}
.button-items {
    order: 2;
    background-color: blue;
}

.bottom-items { 
    order: -1;
    background-color: red;
   
}

.button-items {
   display: flex;
   flex-direction: column;
}

這是一個簡單的結構，它應該看起來像在移動

如果不改變HTML結構，flex order屬性將無法按預期工作。

您可以:

.button-items {
    position: absolute;
    bottom: 0;
}

通過將這些樣式應用到button元素，它將被固定在視口的底部，而不管移動外觀元素。

所以你也應該給出:

.mobile-look {
    position: relative;
}

現在，我們將有另一個問題，防止元素覆蓋按鈕:

.bottom-items {
    max-height: 300px;
    overflow-y: scroll;
}

如果您面臨由于設備高度小而導致按鈕覆蓋項目的問題，請為& quot移動外觀& quot一節確實能有所幫助。為了確保正確定位，您需要計算標題、項目和按鈕的精確高度。

.mobile-look {
    min-height: 600px; // height of headling, button, + bottom-items max-height
}