How to position X button on top right of YouTube video?

Question

I have a div called "stage" containing a YouTube video, and a div called "stageX" which would contain an X button (which I will later program to hide the video when clicked).

I'm trying to position the X to be at the top right of the YouTube video, and to maintain its position when the user zooms in and out of the page.

I set 'stage' as relative and 'stageX' as absolute, but this isn't working... What am I doing wrong here?

http://codepen.io/anon/pen/NxdPoa

<section id="headerstage">
        <div id="stageX">X</div>
        <div id="stage">
            <iframe width="560" height="315" src="https://www.youtube.com/embed/e-ORhEE9VVg" frameborder="0" allowfullscreen></iframe>
        </div>
</section>

CSS

#body{
    color:black;
}
#stage{
    text-align:center;
    width:1000px;
    margin-left:auto;
    margin-right:auto;
    position:relative;
}

#stageX{
    position:absolute;
    float:right;
}

Answer 1

a) Don't use both absolute positioning and floating. Just use absolute positioning.

b) For the position to be relative to an element, the absolutely positioned element needs to be inside the relatively positioned element.

c) Absolute positioning works with the top, right, bottom and left CSS properties. So if you would like something to be at the top right corner of a containing element, you would do:

.container {
  position: relative;
  width: 100px;
  height: 100px;
  border: 1px solid black;
}

.container div {
  position: absolute;
  top: 0;
  right: 0;
}

<div class="container">
  <div>X</div>
</div>