评论形式'成功'消息进入页首但被固定标题隐藏

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指数成功的div比头以上。