Html 如何使用 CSS 将元素定位在页面的左上角？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18694439/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to position an element at the TOP LEFT corner of a page using CSS?
提问by GibboK
I need to place div id="wrapper" on the TOP LEFT corner of the page (top and left = 0), like the id="test" div. Could you point me out what is wrong with my code?
我需要将 div id="wrapper" 放在页面的左上角（顶部和左侧 = 0），就像 id="test" div。你能指出我的代码有什么问题吗？
For your vision: http://jsfiddle.net/Q9fzX/
为了您的愿景：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>
And the css :
和 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;
}
回答by Praxis Ashelin
Your CSS actually already was correct, but each browser has default styling which includes default margin and padding. This is what was causing your elements to be positioned strangely.
您的 CSS 实际上已经是正确的，但是每个浏览器都有默认样式，其中包括默认边距和填充。这就是导致您的元素被奇怪地定位的原因。
Adding the following "reset" CSS at the top fixed it:
在顶部添加以下“重置”CSS 修复了它：
*{
margin: 0;
padding: 0;
}
