html - Form inputs showing behind image

Question

The form/input keeps showing up behind the img #iphone. I tried adjusting z-index and changing position to relative. The z-index is correct on JSfiddle: jsfiddle.net/3uLUj, but not on my site or locally: evanwknight.com/United-Redesign Thanks!

<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

I've looked at your site and if I'm understanding you correctly you want the form to appear inside the iPhone and on top of the image. If so, try replacing your the relevant style declarations in your style.css file with these:

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

You can test is out on this fiddle

Answer 2

In your page evanwknight.com/United-Redesign:

1. div#form has margin-top: -500px, therefore it is out of the screen (style.css: line 21)

2. input#submit has display: none. (style.css: line 99)

Answer 3

Kindly have a look at the js fiddle demo . Are you looking for this ?

Js Fiddle Demo

<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: relative;
    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 4

On inspecting your site, the problem seems to be in margin-top

#form {
text-align: center;
margin-top: -500px;  //remove this will fix your problem
color: #193485;
font-family: Arial;
}

Updates: Not sure, since the height if the div is small compared to the margin-top:300px. It get hidden. Try this