Question

我正在尝试重新创建一些我在网上看过的元素，我一直在使用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中定义的水平框中不渲染的原因吗？

Answer 1

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

Answer 2

@zack;您将position: absolute;提供给a代码，然后将position: relative;提供给适合您的父代modalHeader。

CSS：

.modalHeader {position: relative;}

更多阅读本文http://css-tricks.com/791-absolute-positioning-inside-relative-positioning/

Answer 3

绝对位置始终指的是相对或绝对位置的元素。如果没有，它指的是身体。尝试将position: absolute;更改为position: relative;或将modalHeader定义为position: relative;。

链接没有出现在div类中，出现在它之外

3 个答案: