Html 为什么元素I'；我在我的.css文件中的定义会影响它在渲染时的显示方式吗？

（见下文更新）

我有两个文件：一个.css文件和一个index.html文档。其想法是在屏幕上有一个按钮面板[用于触摸屏界面的原型可用性]，每个按钮在屏幕上指定一个特定位置（请参见.css文件中的“页边顶部”和“页边左侧”标记。稍后我将添加onclick功能等）

不过现在，我只是想让它们在屏幕上正确显示。 奇怪的是，.css部分中的第一个元素（即.aButton#…）在浏览器中显示时总是显示在位置（0,0）上。例如，目前，button1将显示在（0,0）上，但所有其他按钮都位于正确的位置。 如果我更改css代码，并将button2部分向上移动到button1部分的上方，则button1将被渲染到正确的位置，但button2现在位于（0,0）

如果您有任何想法，我将不胜感激

以下是相关部分： 从index.html

<div id="buttonPanel" class="aButton">
            <div id="button1" class="aButton"></div>
            <div id="button2" class="aButton"></div>            
            <div id="button3" class="aButton"></div> 
            <div id="button4" class="aButton"></div>
            <div id="button5" class="aButton"></div>
</div>

更新：用整个html和css文件更新了Fr0zenFyr的jsfiddle，却遇到了同样的问题！ 我真傻，以前没有把它们都包括在内，因为我现在怀疑这与.aButton#buttonx{}定义之前与#buttonx{}定义的奇怪交互有关。 我可以通过合并两者来解决这个问题，但我真的很想理解为什么会出现这种问题，因为我希望稍后在创建不同布局的原型时使用不同的类

---

更新：全部排序！这是我的评论，啊！

问题在于你的评论。css中的评论不是这样写的。 您需要使用

/*

符号

这样做

 /* interface 1 */
 /* need to change all of these according to what numbers I've got in my logbook.*/

---

在您的例子中，移动CSS的顺序不应影响HTML元素的输出。您可以反转按钮的所有CSS类的顺序，这不应影响任何内容

您是否覆盖了任何其他css？您是否将元素设置为内联块？或者，正如btevfik所提到的，您是否在元素上使用了任何定位？您是否在css文件的稍后点覆盖了按钮css

---

其他地方一定有其他问题导致您的按钮在屏幕上移动。

我觉得很好：您好Fr0zenFyr，感谢JSFIDLE-我已经用完整的代码更新了它，但根据上面的更新，仍然遇到相同的问题。@Nathan查看我的更新解决方案很高兴问题现在得到解决。您好Ahnke，感谢您的r我已经用一个完整的CSS文档更新了一个JSFIDLE，我怀疑有一些交互正在进行，但是我不能为我的生活找出什么！谢谢BTEVFK-我最近一直在编码C++，所以我忘记了一些显而易见的事情！！！有时候我也会头痛。HTML，CSS和JS都有不同类型的注释。你能选择这个作为答案吗？@Nathan

 /* interface 1 */
 /* need to change all of these according to what numbers I've got in my logbook.*/