當我調整瀏覽器大小時，HTML/CSS 中的元素移動:(

Question

我嘗試將 position 更改為絕對、固定和 static。但是，仍然得到相同的結果。

我也嘗試過將它包裝在一個 div 元素中，但我可能做錯了，所以我將不勝感激。 （如果這是解決方案）

The.table 不是唯一移動的元素，但我希望一旦我找到一個修復方法，它將適用於所有元素。

我希望元素保留在我放置它們的位置，如果有任何東西縮小一點。

這是 object 我想留在一個地方。

這是我第一次使用 html 和 css，所以如果能得到任何幫助，我將不勝感激。

謝謝你的時間：）

 .table { font-family: "Fira Sans", sans-serif; border-collapse: collapse; overflow-y: scroll; height: 520px; width: 425px; position: relative; display: block; z-index: 6; left: 120rem; bottom: 90rem; background-color: white; border: 4px solid black; z-index: 5; }

 <table class="table"> <thead> <tr> <th> <input type="text" class="search-input" placeholder="Abbreviation"> </th> <th> <input type="text" class="search-input" placeholder="Full Name"> </th> <th> </tr> <tr> <td>XXX</td> <td>XXX, XXX, XXX</td> </tr> <tr> </table> </div>

Answer 1

我冒昧地修改了您的 html。我添加了一些元素並修改了您的 css，以幫助您了解 styles 如何相互影響。 您最初的.table css 包含太多重新定義table元素的規則。 希望我的更改能幫助您獲得一些見解。

您還應該找到一個在線資源來幫助 HTML 和 CSS。
MDN是web開發的源代碼。

附錄：

---

HTML 和 CSS 的好處在於它們允許您混合和匹配元素和規則。 我們有許多工具可以自定義頁面的外觀。 但這也是我們存在的禍根。

FWIW：僅僅因為我們可以將數據收集嵌入到表中（在 header 或其他地方）並不意味着我們應該這樣做。

是的，這是合法的。 是的，它會起作用。

但是......它改變了 HTML 的定義。 這又是完全合法的，它會起作用。 直到它沒有。 比如使用 CSS 重新定義一個display:table來display:block

然后是可訪問性問題，比如屏幕閱讀器在它期望列標題的地方找到輸入

一個元素的各個組成部分被設計為協同工作，並且只應小心地重新定義。 如果我們發現自己試圖讓一個元素像另一個元素一樣工作，我們很可能會錯過一些東西。

 .outer { position: relative; }.dontmove { position: absolute; width: 500px; }.table { font-family: "Fira Sans", sans-serif; border-collapse: collapse; background-color: white; border: 4px solid black; width: 100% }.table th, .table td { padding: 2px 6px; }.table th>input { width: 100%; }

 <div class="outer"> <div class="dontmove"> <table class="table"> <thead> <tr> <th> <input type="text" class="search-input" placeholder="Abbreviation"> </th> <th> <input type="text" class="search-input" placeholder="Full Name"> </th> <th> </tr> <tr> <td>XXX</td> <td>XXX, XXX, XXX</td> </tr> <tr> </table> </div> </div>