如何使用 CSS 将元素定位在页面的左上角？答案

【问题标题】：How to position an element at the TOP LEFT corner of a page using CSS?如何使用 CSS 将元素定位在页面的左上角？
【发布时间】：2013-09-12 17:14:07
【问题描述】：

我需要将 div id="wrapper" 放在页面的左上角（左上角 = 0），就像 id="test" div。你能指出我的代码有什么问题吗？

为了您的愿景： http://jsfiddle.net/Q9fzX/

<div id="wrapper">
    <div class="content">
        <ul>
            <li class="focus">0</li>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
            <li>9</li>
            <li>10</li>
            <li>11</li>
            <li>12</li>
            <li>13</li>
            <li>14</li>
            <li>15</li>
            <li>16</li>
            <li>17</li>
            <li>18</li>
            <li>19</li>
            <li>20</li>
            <li>21</li>
            <li>22</li>
            <li>23</li>
            <li>24</li>
            <li>25</li>
            <li>26</li>
            <li>27</li>
            <li>28</li>
            <li>29</li>
            <li>30</li>
            <li>31</li>
            <li>32</li>
            <li>33</li>
            <li>34</li>
            <li>35</li>
            <li>36</li>
            <li>37</li>
            <li>38</li>
            <li>39</li>
        </ul>
    </div>
</div>
<div id="navigator">
    <div id="up" class="btn">UP</div>
    <div id="down" class="btn">DOWN</div>
    <div id="left" class="btn">LEFT</div>
    <div id="right" class="btn">RIGHT</div>
    <div id="pageinfo" class="pageinfo">Page 1 of tot 4</div>
</div>
<div id="test"></div>

还有CSS：

#test {
    position: fixed;
    top: 0px !important;
    left: 0px !important;
    width: 200px;
    height: 200px;
    background-color: blue;
    opacity: 0.2;
}
body {
    margin: 0;
    padding: 0;
}
#wrapper {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 600px;
}
#navigator {
    position: absolute;
    left: 600px;
}
ul {
    list-style: none;
}
li:nth-child(even) {
    background: #d80000;
}
li {
    width: 100px;
    height: 100px;
    background-color: red;
    float: left;
    margin: 0px;
}
.focus {
    background-color: yellow !important;
}
.btn {
    float: left;
    width: 50px;
    height: 50px;
    border: 2px gray solid;
    margin: 10px;
}

【问题讨论】：

什么不起作用？当我给#wrapper 一个绿色背景时，它会显示在页面的左上方...？
您的代码运行良好。
感谢大家的编辑
我也意识到这个 CSS 只是为了解决问题，但是 !important 在编写良好的 CSS 集合中永远不是必需的，一旦你开始走上 !important 路径，它很快就会变成没有 !important 就不可能设置样式，这让您回到最初的问题，即样式应该组织得足以正确级联（当然有框架例外，如 AngularJS，但仅在极少数和极端情况下）。它只会让代码更难维护。

标签： html css css-float

【解决方案1】：

您的 CSS 实际上已经是正确的，但每个浏览器都有默认样式，包括默认边距和填充。这就是导致您的元素位置异常的原因。

在顶部添加以下“重置”CSS 修复它：

*{
    margin: 0;
    padding: 0;
}

Fiddle

【讨论】：

您可以使用*, body{margin:0;padding:0;} 而不是两者兼有。
他已经设置了margin: 0;填充：0；在身体和位置固定它不被重视。
@BeatAlex body 部分可以完全删除，因为* 已经包含主体。

【解决方案2】：

只需使用这个 css，因为您的 ul 元素采用默认边距和填充。

ul {
            list-style: none;
            margin:0px;
            padding:0px;
        }

这是有效的here

【讨论】：

@C-Link 不，OP 希望他的 #wrapper 位于左上角。 #test div 是展示他想要什么的示例。
@C-Link，不了解任何问答请勿评论