解決表格中查詢按鈕位置偏移問題：CSS 定位技巧

問題現象

在一個包含下拉選單的查詢表格中，當「項目」下拉列表變化時，查詢按鈕位置發生跳動，無法保持固定。嘗試各種 CSS 定位屬性均無效。

根因分析

按鈕所在的容器未建立定位上下文，導致絕對定位相對於 body 或最近的有定位祖先元素，造成位置錯亂。

解決方案

1. 為按鈕的父元素（通常是包裹查詢區域的 <div>）設置 position: relative;，建立定位基準。
2. 為按鈕本身設置 position: absolute;。
3. 通過 top、left、right、bottom 相對於父元素精確定位。

代碼示例

<div class="query-wrapper" style="position: relative;">
  <table>...</table>
  <button class="search-btn" style="position: absolute; top: 10px; right: 10px;">查詢</button>
</div>

注意事項

• 父元素必須有明確的高度，否則絕對定位元素可能超出可視區域。
• 若表格內容動態變化導致高度改變，考慮使用 bottom: 0; 固定在底部，或配合 JavaScript 動態調整。