절대 위치 요소를 포함하는 4 개의 열

저는 게임 작업을 해왔고 어떤 경우에는 절대 포지셔닝을 사용했습니다. 특히 효과를 내기 위해 요소를 슬라이드하고 겹쳐 야하는 움직이는 애니메이션에 필요합니다.

나는 모바일에서 게임을 멋지게 만들기 위해 노력 col하고 있으며, 절대적으로 배치 된 요소를 포함하는 Bootstrap umns로 인해 발생하는 몇 가지 문제를 겪고 있습니다.

이것은 내가 얻으려는 모양입니다 (잘못 정렬 된 숫자를 제외하고), 가운데에 빨간색 사각형 행이 있습니다.

화면의 전체 중앙 부분 (버튼, 그림 이모티콘 및 아래 중앙에있는 카드 아이콘이있는 행)은 s를 row포함 col합니다. 이것은 일부 마크 업입니다.

<div class="col order-1 order-xl-1 col-4 col-xl-2">
    <div style="display:inline-block">
        <p class="backgrounded-text" style="white-space: nowrap; text-overflow: ellipsis;"><span id="turn_elem">...</span></span></p>
        <p class="backgrounded-text">Carta attuale: <span id="curr_card"><img class="card_icon" /></span></p>
    </div>
</div>
<div class="reaction_box order-2 order-xl-2 col col-4 col-xl-2">
    <span style="padding-left:5px!important;padding-right:5px!important" class="reaction_title">Reazioni:</span>
    <table>
        <!-- emojis ... -->
    </table> 
</div>
<div class="col order-5 order-xl-3 col-12 col-xl-3">
    <span>...</span><br />
    <span id="hidden_card">
        <img class="card_placeholder" src="..." />
    </span>
    <span id="card_stack" class="slide_to_right">
        <img class="card_placeholder" src="..." />
    </span>
    <div id="stacked_card"> 
      <img id="stacked_front" class="card_placeholder" src="..." />
    </div>
    <div id="hidden_uncovered_card_div">
        <img id="hidden_uncovered_card" class="card_placeholder" src="..." />
    </div>
</div>
<div class="col col-4 order-3 order-xl-4 col-xl-3">
        <button style="width: 49%" class="btn btn-lg btn-dark" id="doubt" @click="doubt()" :disabled="playing_animation">Dubito!</button>
        <button style="width: 49%" class="btn btn-lg btn-dark">
            Metti giù
        </button>
    </div>
</div>

imgID를 갖는다는 hidden_card(그것이 jQuery를 사용하는 커버 오른쪽 가시 슬라이드되어 적색 하나 왼쪽의 카드 인 animate위치를 조작하기). stacked_card스크린 샷에 표시되는 주요 레드 카드 인 상단에는 jQuery로 뒤집어 오른쪽으로 이동하여 겹치는 또 다른 사본이 있습니다 hidden_uncovered_card. 이것은 애니메이션이 작동하는 방식입니다. 그것들은 모두 position: absolute포지셔닝 을 사용 하고 조작하는 것에 달려 있습니다.

어떤 이유로 위의 코드로 얻은 실제 모습은 다음과 같습니다.

There is some space in between the three columns on the top and the one containing the red card back, and I don't understand where it is coming from. Removing all the position: absolute seems to fix this, but of course, then all the animations that depend on it stop working.

Is there any way to fix this positioning without removing the position: absolute? It'd be a pain to have to rewrite the code for all the animations, as it's working perfectly on desktop.

Here's a static webpage that contains the markup. You can turn it to mobile view (the screenshots were taken as iPhone 6/7/8 mode) and see for yourself.

click

The actual app (a beta version, that is) can be found here, in case you wanted to see how the animations work. If you need any additional information, just let me know.