css - 重叠CSS 中的

Question

所以，我已经看到了很多关于这个的问题，但我想要一个个人的例子。我对编程很陌生，所以我可能有点愚蠢......

无论如何，我有两个<div>s，一个带有 id bg，另一个带有 class player。

这是它的样子：

红框为播放器，大图为bg。

我需要玩家从背景中心开始。

背景为 640 像素 X 640 像素。

这是我目前在我的 CSS 文件中的代码：

#bg {
    width: 640px;
    height: 640px;
    top: 0;
    left: 0;
}

.player {
    position:relative;
    background-color:#FF0000;
    width: 32px;
    height: 32px;
    top: 0px;
    left: 0px;    
}

Answer 1

尝试将样式表更改为：

#bg {
    width: 640px;
    height: 640px;
    top: 0;
    left: 0;
    position: relative;
}

.player {
    position: absolute;
    background-color: #FF0000;
    width: 32px;
    height: 32px;
    top: 320px;
    left: 320px;    
    z-index: 1;
}

您的 HTML 应如下所示：

<div id="bg">
    <!-- your bd code here -->
    <div class="player"></div>
</div>

Answer 2

position: relative是相对于对象正常放置的位置。在您的示例中，它通常位于第一个 div 下方，因此它将保留在此处。（换句话说position: relative，与定位一起使用0不会将对象移动到任何地方。）

您可以添加top: -320px; left: 320px. 这会将它定位在第一个 div 的空间中。但是 maxksbd19 的答案可能是您最终目标的更好解决方案。

Answer 3

我尝试避免绝对定位，因为它不适应容器大小，并且对容器的更改需要您通过 css 并更改所有绝对值。

我会做以下事情

CSS：

#bg {
            overflow: auto; /* stops the .player from from moving #bg down */
            width: 640px;
            height: 640px;
            background-color: blue;
            text-align: center; /* center child div in IE */
        }

        .player {
            background-color: White;
            width: 32px;
            height: 32px;
            margin: 0 auto; /* center div in parent for non IE browsers */
            margin-top: 304px; /* 50% from top minus div size */
        }

HTML：

<div id="bg">
    <div class="player"></div>
</div>

现在您只需要跟踪子容器的上边距。