链接未出现在 div 类中，出现在其外部

Question

我正在尝试重新创建一些我在网上看到的元素，并且我一直在使用元素检查器，但似乎无法弄清楚为什么这个 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 -->   

以及相应的CSS（使用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;
    }
}

任何人都可以弄清楚为什么x没有在我定义的水平框中呈现在模态标题中？

Answer 1

@扎克；您将 position:absolute; 赋予您的 a 标签，因此将 position:relative; 赋予您的父 div modalHeader这对你有用。

CSS：

.modalHeader {position: relative;}

有关更多信息，请阅读这篇文章 http://css-tricks.com /791-绝对定位-内部相对定位/

Answer 2

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

Answer 3

绝对位置始终指的是相对或绝对位于其上方的元素。若无，则指身体。尝试将 position:absolute; 更改为 position:relative; 或将 modalHeader 定义为 position:relative;。