评论表单';成功';消息转到页面顶部,但被固定的页眉隐藏


Comment form 'success' message goes to top of page but is hidden by fixed header

当您提交对博客文章的评论时(例如http://helloarchie.blue/posts/fashion-friday-6),页面会在表单上方刷新一条"成功"消息。

现在我的布局上有了一个固定的标题,成功消息显示在它后面,因此用户看不到它,也没有意识到他们的评论已经通过了。

我使用的是Anchor CMS,所以很难找到所有正在使用的CSS等,因为它在很多不同的地方都有,但这是我可以找到的与通知相关的CSS,无论我尝试什么,我似乎都无法将其推到固定标题下。

PHP

// form elements
function comment_form_notifications() {
return Notify::read();
}
function comment_form_url() {
return Uri::to(Uri::current());
}
function comment_form_input_name($extra = '') {
return '<input name="name" id="name" type="text" ' . $extra . '     value="' . Input::previous('name') . '">';
}
function comment_form_input_email($extra = '') {
return '<input name="email" id="email" type="email" ' . $extra . '     value="' . Input::previous('email') . '">';
}
function comment_form_input_text($extra = '') {
return '<textarea name="text" id="text" ' . $extra . '>' .     Input::previous('text') . '</textarea>';
}
function comment_form_button($text = 'Post Comment', $extra = '') {
return '<button class="btn" type="submit" ' . $extra . '>' . $text . '</button>';
}

PHP

<?php
class Notify {
public static $types = array('error', 'notice', 'success', 'warning');
public static $wrap = '<div class="notifications">%s</div>';
public static $mwrap = '<p class="%s">%s</p>';
public static function add($type, $message) {
    if(in_array($type, static::$types)) {
        $messages = array_merge((array) Session::get('messages.' .   $type), (array) $message);
        Session::put('messages.' . $type, $messages);
    }
}
public static function read() {
    $types = Session::get('messages');
    // no messages no problem
    if(is_null($types)) return '';
    $html = '';
    foreach($types as $type => $messages) {
        foreach($messages as $message) {
            $html .= sprintf(static::$mwrap, $type, implode('<br>',     (array) $message));
        }
    }
    Session::erase('messages');
    return sprintf(static::$wrap, $html);
}
public static function __callStatic($method, $paramaters = array()) {
    static::add($method, array_shift($paramaters));
}
}
<?php
class Migration_add_comment_notifications extends Migration {
public function up() {
    $table = Base::table('meta');
    if($this->has_table($table)) {
        if( ! Query::table($table)->where('key', '=',   'comment_notifications')->count()) {
            Query::table($table)->insert(array(
                'key' => 'comment_notifications',
                'value' => 0
            ));
        }
    }
}
public function down() {}
}

CSS

.notifications {
margin-bottom: 10px;
}
.notifications .notice, .notifications .error, .notifications .success     {
    padding: 10px 18px;
    margin-bottom: 20px;
    font-size: 13px;
    line-height: 21px;
    font-weight: 500;
    border-radius: 5px;
}
.notifications .notice {
    color: #fff;
    background: #578cd9;
}
.notifications .error {
    color: #fff;
    background: #d34937;
}
.notifications .success {
    color: #fff;
    background: #64a524;
}

.header .notifications {
position: absolute;
left: 55%;
top: 182px;
z-index: 1200;
width: 320px;
}
.header .page .notifications {
left: 48%;
}
.header .notifications div:after {
    content: '';
    position: absolute;
    display: block;
    top: -6px;
    right: 50px;
    border-bottom: 6px solid #64a524;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
}
.header .notifications .error:after {
    border-bottom-color: #d34937;
}

将z索引赋予成功div而不是标头。