我需要这个输入文本容器留在这个布局中.在我提交输入文本后，数据显示容器的高度会增加，这通常会将输入文本容器向下推.
然而，如果我使用绝对位置.在我提交之前，它工作得很好，然后我不能使用文本区或提交按钮，除非我重新加载页面.我想这是因为输入容器的内容移动了吗？
我try 了绝对位置，但这导致输入在1次提交后不可用.
我try 删除它，但随后输入容器就会掉到底部.我try 了Transform:Translate(-50%，-50%)，并try 移动输入容器的所有子容器，但都不起作用.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<div class="container position-relative">
<div class="row">
<!-- First container -->
<div class="col-12 col-md-3 order-1 order-md-0">
<div class="card text-center">
<h2>Car Park Number</h2>
</div>
</div>
<!-- 2nd container with position-absolute -->
<div class="col-12 col-md-3 input-container order-2 position-absolute mb-5">
<div class="card">
<div class="card-body">
<h5 class="card-title">Enter Car Park Number Prefix:</h5>
<textarea class="form-control" id="carParkNumberInput" rows="3" placeholder="Enter prefix (e.g. TY)" oninput="validateInputForPrefix(this)"></textarea>
<button class="btn btn-primary ripple mt-3" id="submitPrefixBtn">Submit</button>
</div>
</div>
</div>
<!-- 3rd container -->
<div class="col-12 col-md-9 order-0 order-md-1">
<div class="card custom-height-card">
<div class="card-body">
<div id="yourContainerId" class="row"></div>
</div>
</div>
</div>
</div>
</div>