Javascript 如何相对于另一个图像的边界定位图像？_Javascript_Css_Http

Javascript 如何相对于另一个图像的边界定位图像？

javascript css http

Javascript 如何相对于另一个图像的边界定位图像？,javascript,css,http,Javascript,Css,Http,我正在尝试制作一个基本的视频游戏，有一个操场和一个在其中移动的玩家角色（PC）。我的问题是，尽管PC作为一个在操场内部的实体存在，但它将“left”属性解释为整个页面的realtive，而不是操场，这意味着如果窗口被调整大小，它就会偏离中心。请注意，PC在代码中称为“Atlas” 目前操场是这样建造的： <!DOCTYPE html> <body onLoad="begin()"> <div id = "PlaygroundWrapper">

我正在尝试制作一个基本的视频游戏，有一个操场和一个在其中移动的玩家角色（PC）。我的问题是，尽管PC作为一个在操场内部的实体存在，但它将“left”属性解释为整个页面的realtive，而不是操场，这意味着如果窗口被调整大小，它就会偏离中心。请注意，PC在代码中称为“Atlas”

目前操场是这样建造的：

<!DOCTYPE html>
<body onLoad="begin()">
    <div id = "PlaygroundWrapper">
        <div id = "Playground" onLoad="drawAtlas()">
            <!-- here the DrawAtlas function shuld crate an element -->
            <!-- <div id =  "Atlas"></div> -->
        </div>
    </div>
</body>

这是样式表

#Playground{
    width: 600px;
    height: 600px;
    margin: auto;
    padding:0px;
    cursor: none;
    background:#FFD700;
    box-shadow: inset 5px 5px 50px #808080;
}

#Atlas{
    size: 30x30;
    width: 30px;
    height: 30px;
    background-image: url('./img/atlas.jpg');
    position: absolute;
    left: 270px;
    top: 570px;
}

加位置：相对于#操场

position absolute（绝对定位）将元素绝对定位在下一个相对定位的父元素中，在您的情况下，该父元素可能是

添加的位置：相对于#操场

position absolute将元素绝对放置在下一个相对定位的父元素中，在您的情况下，该父元素可能是

#Playground{
    width: 600px;
    height: 600px;
    margin: auto;
    padding:0px;
    cursor: none;
    background:#FFD700;
    box-shadow: inset 5px 5px 50px #808080;
}

#Atlas{
    size: 30x30;
    width: 30px;
    height: 30px;
    background-image: url('./img/atlas.jpg');
    position: absolute;
    left: 270px;
    top: 570px;
}