How to position X button on top right of YouTube video?
<p>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).</p>

<p>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.</p>

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

<p><a href="http://codepen.io/anon/pen/NxdPoa" rel="nofollow">http://codepen.io/anon/pen/NxdPoa</a></p>

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

<p>CSS</p>

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

#stageX{
    position:absolute;
    float:right;
}
</code></pre>