search box not getting positioned in css3 - html

Question

input[type=text] {
margin-left: 63%;
margin-top: -100%;
width: 130px;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
font-size: 16px;
background-color: black;
background-image: url('searchicon.png');
background-repeat: no-repeat;
padding: 12px 20px 12px 40px;
-webkit-transition: width 0.4s ease-in-out;
transition: width 0.4s ease-in-out;
}
input[type=text]:focus {
width: 150px;
}
<form>
<input type="text" name="search" placeholder="Search..">
</form>
even after puttin margin-top -100% the search box is not going up. it stopped going up after -10%. Any help would be highly appreciated. Thanks in advance. :)

Answer 1

Use "position:relative" and "top:-100px". It will move your search box to move up. You can increase the 'top' value as you need.
input[type=text] {
margin-left: 63%;
width: 130px;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
font-size: 16px;
background-color: black;
background-image: url('searchicon.png');
background-repeat: no-repeat;
padding: 12px 20px 12px 40px;
-webkit-transition: width 0.4s ease-in-out;
transition: width 0.4s ease-in-out;
position: relative;
top: -100px;
}
input[type=text]:focus {
width: 150px;
}