CSS top positioning in firefox

Question

I have styled this code block while using Google chrome and as you see in this image it aligns fine.

However when viewing it with Firefox it doesn't display correctly

What am I doing wrong?

 .full-panel select { -webkit-appearance:none; background-color:#1B6B80; background-position:95% 50%; background-repeat:no-repeat; border:1px solid #1B6B80; border-radius:2px; color:#FFFFFF; display:block; font-size:10px; height:30px; line-height:10px; padding-left:5px; padding-right:25px; position:absolute; right:150px; top:30px; width:150px; } 

 <form method="POST" action="/" accept-charset="UTF-8"><input name="_token" type="hidden" value="M7sQaw7MVFV4DQhoyMxdiuJPB7E5KbaWVB5U9lbp"> <div class="full-panel"> <input name="quick" value="1" type="hidden"> <input class="biginput" type="text" name="name" placeholder="Set up your free website"> <select name="domain_id"> <option>mysite.com</option> </select> <input class="bigbutton" type="submit" value="Submit"> </div> </form> 

Answer 1

When you have to use the position absolute be sure that its parent container has a relative position

.full-panel {
  position:relative;
}

This way you can start counting the pixels (top:30px) relatively to its container and NOT relatively to body