当我调整浏览器大小时，HTML/CSS中的元素会移动:(

Question

我尝试将位置更改为绝对、固定和静态。但是，仍然得到相同的结果。

我也尝试过将它包装在div元素中，但我可能做错了，所以我希望得到帮助。(如果这是解决方案(

.table并不是唯一可以移动的元素，但我希望一旦我找到一个修复方案，它就会适用于所有元素。

我希望元素保持在我放置它们的位置，如果有什么收缩的话。

这就是我想留在一个地方的目标。

这是我第一次使用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，以帮助您了解样式如何相互影响。您最初的.tableCss包含了太多重新定义table元素的规则。希望我的更改能帮助您获得一些见解。

此外，您应该找到一个在线资源来帮助HTML和CSS
MDN是web开发的来源。

附录：

---

HTML和CSS的好处在于，它们允许您混合和匹配元素和规则。我们有许多工具可以自定义页面的外观。但这也是我们生存的祸根。

FWIW：仅仅因为我们可以将数据收集嵌入到表中(在表头或其他位置(并不意味着我们应该这样做。

是的，这是合法的。是的，它会起作用的。

但是。。。它改变了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>