In positioning, how to clear the bottom that have been set

This thing is actually very simple, will bottom set auto, can set the value of top, then what is the specific application?

Examples are as follows

CSS code:

* {margin:0; padding:0;}. fixed {z-index:9; position:fixed; left:50%; Margin-left: -320px; bottom:0; width:640px; padding:30px; background: #f ff border:1px solid #ddd; Border-left:none; Border-right:none;}. TXT {line-height:50px; width:100%; text-indent:10px;}. gb-mask {display:none; position:fixed; left:0; top:0; width:100%; height:100%; Background:rgba (0,0,0,.2);}

HTML code

<div style= "width:640px; margin:0 auto; " ><div class= "fixed" ><input type= "text" class= "TXT" placeholder= "input"/></div></div>< Div class= "Gb-mask" ></div>

JQ Code

<script>$ (function () {$ ('. txt '). focus (function () {$ ('. Fixed '). css ({' Bottom ': ' Auto ', ' top ': ' 0 '}) $ ('. Gb-mask ') ). FadeIn ();}); $ ('. Gb-mask '). Click (function () {$ ('. Fixed '). css ({' Bottom ': ' 0 ', ' top ': ' Auto '}) $ ('. Gb-mask '). FadeOut ();}); </script>

Effect

In positioning, how to clear the bottom that have been set