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

编程入门行业动态更新时间:2024-10-24 22:20:07

本文介绍了如何使用CSS将元素定位在页面的左上角？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！问题描述我需要将div id="wrapper"放在页面的左上角(左上角=0)，如id="test"div。您能给我指出我的代码有什么问题吗？

对于您的愿景： jsfiddle/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

您的推荐答案实际上已经正确，但是每个浏览器都有默认样式，其中包括默认页边距和填充。这就是导致您的元素位置奇怪的原因。