Link not appearing in div class, appearing outside of it

I'm trying to re-create a few elements I've seen online and I've been using Element Inspector but can't seem to figure out why this a href element is loading outside of my modalHeader class.

Here's some HTML:

<div id="modalContainer">
<div class="fakeModal">

    开发者_如何学JAVA<div class="modalHeader"> 

        <h2>Fake Modal Heading</h2>
        <a href="#" class="close">x</a>

    </div> <!-- end modalHeader -->

</div> <!-- End fakeModal -->   

And corresponding CSS (using Less)

#modalContainer {
width: 700px;
height: 250px;
background: gray;
padding: 1px; }

.fakeModal {
    width: 500px;
    height: 150px;
    margin: 50px auto 50px auto;
    border-radius: 3px;
    //border: 3px solid black;
    background: white;
}

.modalHeader {
h2 {
    background: @dullGray;
    border-bottom: solid 1px #EEE; //This makes so much of a difference!!!!
    border-radius: 3px 3px 0 0;
    display: block;
    -webkit-margin-before: 1em;
    -webkit-margin-after: 1em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
    padding: 9px 15px;
}

a.close{
    position: absolute;
    top: 10px;
    right: 10px;
    color: gray;
    text-decoration: none;
    font-size: 18px;
}

a.close:hover {
    text-decoration: underline;
    color: gray;
    }
}

Can anyone figure out why the x isn't rendering in the horizontal box I've defined in modalHeader?

@zack; you give position: absolute; to your a tag so, give position: relative; to your parent div modalHeader that's work for you .

CSS:

.modalHeader {position: relative;}

for more read this article http://css-tricks.com/791-absolute-positioning-inside-relative-positioning/

You've set the link to be position absolute, not relative to it's parent container. Remove the position, and change the top and right to margins.

An absolute position always refers to the element above which is positioned relative or absolute. If there isn't one, it refers to the body. Try to change position: absolute; to position: relative; or define the modalHeader as position: relative;.