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