CSS真的忽略了我

Question

我正在编写一个程序，其中涉及到CSS样式。

我需要你的帮助的是这里：http://jsfiddle.net/yupsdk/6MxfQ/10/

body { margin: auto; }

#fields {
    position: relative; 
    width: 408px; 
    height: 370px; 
    background: url('http://hhsrv.n.dk/chat/gfx/rum/sms/old/gummicelle.jpg') repeat-x; border: 1px #DDD solid; 
}

.field {
    width: 2px;  
    height: 2px; 
    background: #FF0000; 
    position: absolute;
}

#user { 
    top: 500;   
    border: 1px solid black; 
    background: url('http://www.geekabit.dk/community/profil/figur/1335803573_149116.gif') no-repeat;  
    width: 52px; 
    height: 77px; 
}

脚本加载后，人物需要站在数字上，比如它生成时需要站在25上，而不是像现在一样站在它的下面。如果您的浏览器中有控制台，它会告诉您它应该站在哪个位置。

我真的弄不明白。我已经尝试了z-index和top，但都没有成功。我希望你能帮我解决这个问题。

- Kevin Steen Hansen

---

你知道在CSS中允许使用空格（包括换行）吗？ - GolezTrol

Answer 1

我相信您需要使用 position:relative 和 z-index 。

衬衫下的数字：http://jsfiddle.net/6MxfQ/17/ 衬衫上的数字：http://jsfiddle.net/6MxfQ/16/

#user { border: 1px solid black;
   background: url('http://www.geekabit.dk/community/profil/figur/1335803573_149116.gif')
   no-repeat; width: 52px; height: 77px;
   position:relative;z-index:1;}

- MikeSmithDev

---

它仍然在25个字段下面吗？ - Kevin Steen Hansen

你的意思是像这样的http://jsfiddle.net/6MxfQ/14/吗？我只是用margin来偏移它。 - MikeSmithDev

Mike，我觉得你误解了我的意思，数字必须在他的衬衫下面，所以gif图像在数字上方。 - Kevin Steen Hansen

如果你想要他衬衫上的数字，那么只需删除该position:relative;。 - MikeSmithDev

Answer 2

问题在于您只是简单地附加了 #user div，因此它出现在已选择的数字之后。为了使它看起来像用户站在数字上方，您需要使用负边距：

#user { ... margin: -97px 0 0 -20px; }

如果您想调整用户的位置，请尝试更改顶部和左侧边距的值。

jsFiddle

- Tim Hobbs