html - 链接未出现在div类中，而是出现在其外部

我试图重新创建一些我在网上看到的元素，并且一直在使用Element Inspector，但似乎无法弄清楚为什么这个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不能在modalHeader中定义的水平框中渲染？

最佳答案

@zack;您将position: absolute;赋予a标记，因此，将position: relative;赋予您的父div modalHeader即可。

CSS：

.modalHeader {position: relative;}

有关更多信息，请阅读本文http://css-tricks.com/791-absolute-positioning-inside-relative-positioning/

关于html - 链接未出现在div类中，而是出现在其外部，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/7201221/