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

时间:2017-03-15 06:50:11

标签: php jquery ajax codeigniter

我在设置图像和div之间的z-index时遇到问题(我准备这个div来保存编辑(重新上传新图像)和删除按钮。 为了您的信息我正在使用ajax和codeigniter来处理图像上传,并在上传图像后,我想要使用编辑和删除按钮查看图像。 这是我的HTML

<div id="calendar">
  <div>
    1
  </div>
  <div>
    2
  </div>
  <div>
    3
  </div>
  <div>
    4
  </div>
  <div>
    5
  </div>
  <div>
    6
  </div>
  <div>
    7
  </div>
  <div>
    8
  </div>
  <div>
    9
  </div>
  <div>
    10
  </div>
  <div>
    11
  </div>
  <div>
    12
  </div>
  <div>
    13
  </div>
  <div>
    14
  </div>
</div>

css风格

#include <iostream>
#include <string>

void getInformation(std::string & name, std::string & surname, int & age) {
    std::cout << "Enter name: ";
    std::cin >> name;

    std::cout << "Enter surname: ";
    std::cin >> surname;

    std::cout << "Enter age: ";
    std::cin >> age;
}

void showInformation(std::string name, std::string surname, int age) {
    std::cout << "Name: " << name << std::endl;
    std::cout << "Surname: " << surname << std::endl;
    std::cout << "Age: " << age << std::endl;
}

int main() {
    std::string name[ 2 ];
    std::string surname[ 2 ];
    int age[ 2 ];

    for( int i = 0; i < 2; i++ )
        getInformation( name[ i ], surname[ i ], age[ i ] );

    for( int i = 0; i < 2; i++ )
        showInformation( name[ i ], surname[ i ], age[ i ] );
    return 0;
}

和ajax(jquery)

<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>

并且控制器中的方法是

.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;
}

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

1 个答案:

答案 0 :(得分: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>';