下拉菜单未显示在contnet前面

Question

下拉菜单未显示在内容前面。但它显示在内容背后。

的header.php

<li class="list-item account">
   <div class="account-info item-click">
        <?php 
          $userId=$this->session->userdata('cp_userid');
          $getmydetails=$this->Usermodel->mydetails($userId);
          $pic="";
          foreach($getmydetails->result() as $i){
              $pic=$i->profilePic;
          }
        ?>
        <?php if($pic!=''){ ?>
        <img src="<?php echo base_url()?>private/<?php echo $userId;?>/<?php echo $pic;?>" name="preview" alt="">
        <?php }else{?>
        <img src="<?php echo base_url()?>public/images/default-profile_pic.png" alt="">
        <?php }?>
    </div>
    <div class="toggle-account toggle-list">
        <ul class="list-account">
            <li><a href="<?php echo base_url()?>user/settings/"><i class="icon md-config"></i>Setting</a></li>
            <li><a href="<?php echo base_url()?>user/settings/profile"><i class="icon md-user-minus"></i>Profile</a></li>
            <li><a href="<?php echo base_url()?>Authcontroller/logout"><i class="icon md-arrow-right"></i>Sign Out</a></li>
        </ul>
    </div>
</li>

的style.css

.list-account-info .toggle-account {
position: absolute;
background-color: #fff;
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
border-radius: 7px;
-webkit-box-shadow: 0 0 7px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 0 7px rgba(0, 0, 0, 0.3);
box-shadow: 0 0 7px rgba(0, 0, 0, 0.3);
width: 120px;
top: 40px;
right: -14px;
opacity: 0;
visibility: hidden;
z-index: 9;
-webkit-transition: all 0.3s ease 0s;
-moz-transition: all 0.3s ease 0s;
-ms-transition: all 0.3s ease 0s;
-o-transition: all 0.3s ease 0s;
transition: all 0.3s ease 0s;
}

.list-account-info .toggle-account.toggle-message-add {
  opacity: 1;
  visibility: visible;
}

z-index是否正常工作？

当我点击图片注销时，它会显示如下。