当脚本从控制器发送到 jquery ajax 时 z-index 不起作用答案

【问题标题】：z-index is not working when script send from controller to jquery ajax当脚本从控制器发送到 jquery ajax 时 z-index 不起作用
【发布时间】：2017-03-15 06:50:11
【问题描述】：

我在设置图像和 div 之间的 z-index 时遇到问题（我准备此 div 以保存编辑（重新上传新图像）和删除按钮。为了您的信息，我正在使用 ajax 和 codeigniter 来处理图像上传，上传图像后，我想查看带有编辑和删除按钮的图像。这是我的html

<div class="writecontainer">
    <div class="dropable">
        <input class="ufile" type="file" accept="image/*" id="file" name="file"/>
        <p class="italic tcenter" style="margin-top:-120px;color:#a6a6a6;z-index:0">
            <img src="<?php echo base_url().'images/login/2camera48.png';?>"/>
            <br>
            click or drop your image here
        </p>
    </div>
</div>

css 样式

.writecontainer{
    margin-top:30px;
    width:600px;
    margin-left:auto;
    margin-right:auto;
}
.dropable{
    background:#e0ebeb;
    border-radius:10px;
    text-align:center;
}
.writecontainer > .dropable > img.uploadtemp{
    width:100%;
    border-radius:10px;
}
.writecontainer .dropable input.ufile{
    display:block;
    width:100%;
    height:150px;
    border:1px solid yellow;
    border-radius:10px;
    opacity:0;
}

和 ajax (jquery)

$('#file').on('change',function(){
    var file_data = $('#file').prop('files')[0];
    var form_data = new FormData();
    form_data.append('file', file_data);
    $.ajax({
       url: 'http://localhost/login/index.php/dashboard_main/upload_file', 
       dataType: 'text', // what to expect back from the server
       cache: false,
       contentType: false,
       processData: false,
       data: form_data,
       type: 'post',
       success: function (response) {

       $('.dropable').html(response);
       $('.dropable').removeAttr('style');
       $(".dropable").css("height:auto");
       $(".dropable div.editcontainer").css({"z-index":"99"});
       $(".dropable > img").css({"z-index":"-1"});
       },
       error: function (response) {
       alert(response);
       }
    });
});

控制器中的方法是

public function upload_file() {
    $xx['userData'] = $this->session->userdata('userData');
    //upload file
    $config['upload_path'] = 'images/';
    $config['allowed_types'] = 'gif|jpg|png|jpeg';
    $config['max_filename'] = '5000000';
    $config['encrypt_name'] = FALSE;
    $config['max_size'] = '1024000'; //1 MB
    $config['file_name'] = $xx['userData']['oauth_uid'].'_'.$_FILES['file']['name'];

    if (isset($_FILES['file']['name'])) {
        //$new = 'xyz'.$_FILES['file']['name'];
            if (file_exists('images/' . $config['file_name'])) {
                echo 'File already exists in the desire destination';
            } else {
                $this->load->library('upload', $config);
                $this->upload->initialize($config);

                if (!$this->upload->do_upload('file')) {
                    echo $this->upload->display_errors();
                } else {
                    echo '<img class="uploadtemp" src="'.base_url().'images/' . $config['file_name'].'"><div class="editcontainer" style="height:45px; margin-top:-50px;border:1px solid red;"></div>';

                }
            }
        //echo $_FILES['file']['name'];
    } else {
        echo 'Image upload unsuccessful';
    }
}

首先，我在控制器中设置了 z-index，但没有任何反应。所以我想也许它必须在我打印出 ajax 中的 html 数据后设置，但 z-index 仍然错误。任何帮助将不胜感激，谢谢

【问题讨论】：

删除 .css() 函数周围的 { } 花括号并再次检查。
根据你的建议我试了一下，但什么也没发生，这是代码 $(".dropable div.editcontainer").css("z-index":"99"); $(".dropable > img").css("z-index":"-1");

标签： php jquery ajax codeigniter

【解决方案1】：

如果你想从你的控制器传递一个 ajax 的 html，只需像这样在样式标签中添加 css 并添加 !important。 z-index: 9999 ！重要。示例z-index: 9999 !important

  echo '<img class="uploadtemp" src="'.base_url().'images/' . $config['file_name'].'"><div class="editcontainer" style="height:45px; margin-top:-50px;border:1px solid red;z-index: 9999 !importantz-index: 9999 !important"></div>';

【讨论】：