本文介绍了如何使用CSS将元素定位在页面的左上角？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我需要将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;
}
css
您的推荐答案实际上已经正确，但是每个浏览器都有默认样式，其中包括默认页边距和填充。这就是导致您的元素位置奇怪的原因。
在顶部添加以下"重置"CSS可修复此问题：
*{
margin: 0;
padding: 0;
}
Fiddle
这篇关于如何使用CSS将元素定位在页面的左上角？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！
本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除！