时间戳

首页 > 解决方案 > 为什么这个文本在它的位置？

html - 为什么这个文本在它的位置？

问题描述

我有一个 HTML 页面，由于某种原因，文本超出了应有的位置。 这是一张图片。请注意，此图像被剪得更小图像中 的文本应该位于灰色区域。

我不是最擅长 CSS 和 HTML，所以这可能很明显。

我试图修复它，但我没有做任何工作，它只会在我试图修复它时变得更糟。

这是代码。

#screen {
    position: fixed;
    background: none;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
}

#levels {
    position: fixed;
    background: black;
    left: calc(50% - 224px);
    top: 0px;
    width: 448px;
    height: 126px;
}

#rockCount {
    position: relative;
    background: gray;
    left: calc(50% - 128px);
    top: 84px;
    width: 256px;
    height: 32px;
}

.level {
    position: relative;
    background: gray;
    left: 0px;
    top: 10px;
    width: 64px;
    height: 64px;
    margin-left: 64px;
    float: left;
}

#rock {
    position: fixed;
    background: black;
    left: calc(50% - 128px);
    top: calc(50% - 128px);
    width: 256px;
    height: 256px;
}
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Stone breaker</title>
        <link href="style.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
        <div id="screen">
            <div id="levels">
                <div class="level" id="level0"></div>
                <div class="level" id="level1"></div>
                <div class="level" id="level2"></div>
                <div id="rockCount">
                    <div id="countText">Rocks destroyed: 0/10</div>
                </div>
            </div>
            <div id="rock"></div>
        </div>
    </body>
    <script src="main.js"></script>
</html>

标签： htmlcss

解决方案

首先，只有在没有更好的标签可用时才应该使用“div”元素。您可以在此处找到不同标签的概述： https ://www.w3schools.com/tags/

关于您的问题，我会说这是因为以下css：

#rockCount {
    position: relative;
    background: gray;
    left: calc(50% - 128px);
    top: 84px;
    width: 256px;
    height: 32px;
}

你说元素应该相对于它的当前位置定位。然后你说它应该是从这个位置向下 84px 的位置。

您可以在此处阅读有关定位的更多信息： https ://www.w3schools.com/css/css_positioning.asp

推荐阅读