CSS不适用于div元素

Question

我的CSS遇到了这个问题，我试图使我的X按钮出现在div框的右上角。问题在于它只是没有出现在任何地方。代码对我来说似乎还可以。我想知道是什么引起了这个问题？有人可以帮忙吗？请运行该代码段，您将发现按钮x根本没有出现！我为不必要的长html代码表示歉意。

.x {
    position: absolute;
    background: red;
    color: white;
    top: -10%;
    right: -10%;
}

<div class="divider"></div>
<div class="frame" onmouseover=""><button class="x">X</button><!--This button-->
    <div class="section">
        <h5>Only take into consideration of the  x button</h5>
        <center>
            <div class="uploader" onclick="selectFile(this)"></div><input type="file" name="userprofile_picture" accept="image/*" onchange="handleImage(this)" /></center>
        <div class="grid-container">
            <div class="grid-item">
                <p style="color:white">A) '+A+'</p>
            </div>
            <div class="grid-item">
                <p style="color:white">B) '+C+'</p>
            </div>
            <div class="grid-item">
                <p style="color:white">C) '+B+'</p>
            </div>
            <div class="grid-item">
                <p style="color:white">D) '+D+'</p>
            </div>
        </div>
        <div class="grid-container3">
            <div class="grid-item"><span style="color:green;font-weight:bold">Answer: '+answer+'</span></div>
            <div class="grid-item"></div>
            <div class="grid-item"></div>
            <div class="grid-item"><input class="timer" type="range" min="3" max="20" value="10" oninput="showValue(this)">
                <h4>
                    <p>5 Minutes</p>
                </h4>
            </div>
        </div>
    </div>
</div><br>

Answer 1

您的值是错误的。由于值为负，因此将其放置在框架的右上角和外部。试试这个：

.x {
    position: absolute;
    background: red;
    color: white;
    top: 10%;
    right: 10%;
}

Answer 2

您的定位有问题

绝对位置使其从右到左位于右上角。通过将其设为-10％，您可以将其从屏幕上删除。您可以将其定位为正数

没有定位