Css not applying on div element - html

Question

I have this problem with my css, I'm trying to make my X button appear to the top right corner of my the div frame. The problem is that it is just not appearing anywhere. the codes seems okay to me. I wonder what is causing this problem?. Can someone help? Please run the snippet you will see that the button x is not appearing at all!and I apologize for the unnecessary long html codes.
.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

Your values are wrong. You're placing it on the top right corner and outside of the frame because of the negative values. Try this:
.x {
position: absolute;
background: red;
color: white;
top: 10%;
right: 10%;
}

Answer 2

There is a problem with your positioning
The absolute position makes it to the top right-hand corner, from right to left. By making it -10% you are taking it off the screen. You could position it with a positive number
Without positioning