html - 表单输入显示在图像后面

Question

表单/输入一直显示在 img #iphone 后面。我尝试调整 z-index 并将位置更改为相对位置。 JSfiddle 上的 z-index 是正确的:jsfiddle.net/3uLUj，但在我的站点或本地不正确:evanwknight.com/United-Redesign 谢谢!

<div id="form">
    <form action="index.php" method="post">
       <input type="text" name="name" placeholder="enter first and last name" >
       <br />
       <input type="image" value="Submit" src="submit-1.gif" id="submit"/>
    </form>
</div>

#iphone {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -350px; /* Half the height */
    margin-left: -266px; /* Half the width */
    z-index: -100;
}
#form {
    position: absolute;
    z-index: 9999;
} 
input {
    position: absolute;
    text-align: center;
    font-size: 30px;
    width: 200px;
    border-top: none;
    border-right: none;
    border-left: none;
    border-bottom: 5px solid #cccccc;
    padding: 15px;
    background: rgba(255,255,255,0.5);
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    border-radius: 2px; /* future proofing */
    -khtml-border-radius: 2px; /* for old Konqueror browsers */
    z-index: 9999;
}

Answer 1

我查看了您的网站，如果我对您的理解正确的话，您希望表单出现在 iPhone 内部和图像之上。如果是这样，请尝试用这些替换 style.css 文件中的相关样式声明:

#form {
    text-align: center;
    color: #193485;
    font-family: Arial;
}


#iphone {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -350px; /* Half the height */
    margin-left: -266px; /* Half the width */
    z-index: -100;
}

#plain {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -200px; /* Half the height */
    margin-left: -177px; /* Half the width */
    z-index: 100;
}

#form {
    position: absolute;
    z-index: 9999;
    height: 600px;
    width: 354px;
    top: 50%;  left: 50%;  margin-top: -200px;  margin-left: -177px;  
}

input {
    text-align: center;
    font-size: 30px;
    width: 200px;
    border-top: none;
    border-right: none;
    border-left: none;
    border-bottom: 5px solid #cccccc;
    padding: 15px;
    background: rgba(255,255,255,0.5);
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    border-radius: 2px; /* future proofing */
    -khtml-border-radius: 2px; /* for old Konqueror browsers */
    z-index: 9999;
}

你可以在这个fiddle 上测试