html - 如何正确放置关闭按钮

Question

各位!我是一名网络开发人员和设计师，但这个让我目瞪口呆。我有一个带有关闭按钮的警报(这不是 Bootstrap)。它在主页上显示正常:

但是当我在提交页面上放置相同的警报时，它会向下移动关闭按钮:

有什么想法吗？这是我的 HTML:

<div class="alert">
    <div class="alertContents">
        When you submit yo stuff, it comes up in the feed right away.
        <div class="alertClose">&times;</div>
    </div>
</div>

和 CSS:

.alert {
    width: 100%;
    background-color: #DD7474;
    font-family: 'Raleway', sans-serif;
    font-size: 18px;
    color: #FBFBFC;
    margin: auto;
    border-radius: 2px;
    border-color: transparent;
    border-width: 0px;
    border-style: solid;
}
.alertContents {
    padding-top: 4px;
    padding-bottom: 4px;
    padding-left: 10px;
    padding-right: 10px;
}
.alertClose {
    float: right;
    width: auto;
    height: auto;
    color: #FBFBFC;
    cursor: hand;
}

谢谢!

Answer 1

.alert {
 position:relative;
}
.alertClose {
 position:absolute;
 top:5;
 right:5;
}

这可能就是您所需要的。查看此链接上的 #4 http://www.barelyfitz.com/screencast/html-training/css/positioning/