Question

我目前正在编写一个简单的javascript游戏。游戏在div中进行，名为 #box 。敌人是div，名为 #enemy 。

       <div id="box">
                <div id="prepend">
                    <div id="hero"></div>
                </div>
                <div id="enemy"></div>
       </div>

在#box中，＃sonemy将使用setInterval()函数生成随机数（动画为x，y）。但是，当我这样做时，不知何故，坐标开始的原点位于窗口的左上角，它应位于 #box 的左上角。这就是我尝试生成随机数以保持 #eoemy 在 #box

中的方式

var test = Math.floor(Math.random() * (1500 - $("#box").offset().left) + 0),
    test2 = Math.floor(Math.random() * (750 - $("#box").offset().top) + 0);

但我明显的问题是它会在 #box 之外保持动画效果。

CSS：

    #box{
    width:640px;
    height:400px;
    float: left;
    background:url(../png/space.jpg);
    margin: 0 0 0 100px;
    }   
    #enemy {
    width: 69px;
    height: 50px;
    position: absolute;
    margin: 100px 0 0 100px;
    background:url(../png/target2.png);
    z-index:2;
}

Answer 1

容器div需要position: relative。否则，窗口的位置或具有relative位置的最近父元素将用于确定内部div的位置。通过使父级具有相对位置，子div将自己相对定位到其父级而不是相对于窗口。

Answer 2

你需要：

position: relative;

在#box CSS中，#enemy的绝对位置相对于框。

Answer 3

将position: relative;添加到#box以相对于#box创建#enemy位置。

Answer 4

要使#box个孩子相对于孩子的位置，您可以根据自己的要求使用以下任何一个：

#box { position: absolute; }
#box { position: relative; }
#box { position: fixed; }

CSS div使用坐标定位

4 个答案: