Html 链接不出现在div类中，出现在它之外

我正在尝试重新创建一些我在网上看到的元素，我一直在使用元素检查器，但似乎不明白为什么这个a href元素在我的modalHeader类之外加载

以下是一些HTML：

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

    <div class="modalHeader"> 

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

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

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

---

有人知道为什么x没有在我在modalHeader中定义的水平框中渲染吗？

您已经将链接设置为绝对位置，而不是相对于其父容器。删除位置，并将顶部和右侧更改为边距。

您已将链接设置为绝对位置，而不是相对于其父容器。删除该位置，并将顶部和右侧更改为边距。

绝对位置总是指位于相对或绝对位置上方的元素。如果没有，它指的是身体。尝试更改

位置：绝对至<代码>位置：相对或将modalHeader定义为
位置：相对
绝对位置始终指相对或绝对定位的元素。如果没有，它指的是身体。尝试更改
位置：绝对至<代码>位置：相对或将modalHeader定义为
位置：相对扎克；您给出
位置：绝对到你的
a
标签，因此，给出
位置：相对
发送给您的父div
modalHeader
这是您的工作

CSS:

更多信息，请阅读本文
@zack；您给出
位置：绝对到你的
a
标签，因此，给出
位置：相对
发送给您的父div
modalHeader
这是您的工作

CSS:

要了解更多信息，请阅读本文

#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;
    }
}

.modalHeader {position: relative;}