php - 评论表单 'success' 消息转到页面顶部但被固定标题隐藏

Question

当您提交对博客文章的评论时(例如，在 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;
}

Answer 1

将 z-index 赋予成功的 div，而不是标题。