body { margin:0; padding:20; font-size:14px; } .box-1 { height:200px; background-color:#09BB07; position:relative; } .box-1 .search { height:40px; width:80%; border-radius:20px; border:none; background-color:#fff; position:absolute; left:10%; bottom:-20px; box-shadow:0 0 5px #999; z-index:5; transition:all 0.5s ease-in-out 0s; top:auto; padding:0 10px; box-sizing:border-box; outline:none; } .box-1 .search.fixed { height:30px; width:70%; border-radius:15px; border:none; background-color:#eee; position:fixed; left:20%; top:5px; box-shadow:none; bottom:auto; } .box-top { height:40px; position:fixed; width:100%; left:0; top:0; background-color:rgba(255,255,255,0); z-index:1; transition:all 0.5s ease-in-out 0s; } .box-top.active { background-color:rgba(255,255,255,1); }