title: Toggle search layer over other icons
body: <p>I have recently moved over from blogger to wordpress, so I'm very much a newbie, but trying very hard to learn. </p>
  
  <p>I want to have a toggle search in my top right corner next to some social icons. What I want is for just a search icon to show, but when it's clicked it expands to show a search field. So far I've managed that, but the problem is that when the search field expands, it pushes the social icons left. I would rather the search field overlap the social icons, hiding them temporarily. Something like this: <a href="http://www.thecoveteur.com" rel="nofollow">http://www.thecoveteur.com</a></p>
  
  <p>So far I have:</p>
  
  <pre><code>----HTML-----
      &lt;div&gt;
      &lt;ul class="social"&gt;
         &lt;li class="facebook"&gt;
            &lt;a href=""&gt;
               &lt;strong&gt;FACEBOOK&lt;/strong&gt;
            &lt;/a&gt;
         &lt;/li&gt;
         &lt;li class="twitter"&gt;
            &lt;a href=""&gt;
               &lt;strong&gt;TWITTER&lt;/strong&gt;
            &lt;/a&gt;
         &lt;/li&gt;
      &lt;li class="pinterest"&gt;
            &lt;a href=""&gt;
               &lt;strong&gt;PINTEREST&lt;/strong&gt;
            &lt;/a&gt;
         &lt;/li&gt;
         &lt;li class="instagram"&gt;
            &lt;a href=""&gt;
               &lt;strong&gt;INSTAGRAM&lt;/strong&gt;
            &lt;/a&gt;
         &lt;/li&gt;
         &lt;li class="bloglovin"&gt;
            &lt;a href=""&gt;
               &lt;strong&gt;BLOGLOVIN'&lt;/strong&gt;
            &lt;/a&gt;
         &lt;/li&gt;
      &lt;li&gt;
      &lt;form role="search" method="get" class="search-form" action="&lt;?php echo home_url( '/' ); ?&gt;"&gt;
          &lt;label&gt;
              &lt;input type="search" class="search-field" placeholder="Search …" value="" name="s" title="Search for:" /&gt;
          &lt;/label&gt;
      &lt;/form&gt;
      &lt;/li&gt;
      &lt;/ul&gt;
      &lt;/div&gt;
     ----CSS----- 
      .social { 
      list-style:none; 
      margin-bottom:10px;
      }
      .social li { 
      display:inline; 
      float:left; 
      }
      .social li a { display:block; width:24px; height:24px; padding-right:50px; position:relative; }
      .social li a strong { 
      position:absolute; 
      left:50%;
      margin-left:-90%;
      margin-top:30px;
         font-family:'questrialregular';
      text-transform:uppercase;
      font-weight:100;
      font-size:12px;
      }
  
      li.facebook { background-image:url("http://3.bp.blogspot.com/-dG3Uh5wbbkc/UrbakrftBVI/AAAAAAAADe0/Nyk_oAJrz7o/s1600/facebook.png"); background-repeat:no-repeat; }
      li.twitter { background-image:url("http://4.bp.blogspot.com/-Ub-33u2lfa4/UrbalXBwDQI/AAAAAAAADfA/wzp9y9g9Zts/s1600/twitter2.png"); background-repeat:no-repeat; }
      li.instagram { background-image:url("http://4.bp.blogspot.com/-7n7d_7AueXo/UqV-qJxyw4I/AAAAAAAADaA/hOUqalWGy40/s1600/instagram.png"); background-repeat:no-repeat; }
      li.pinterest { background-image:url("http://1.bp.blogspot.com/-w0LN-WnpsNc/UrbakgTnOkI/AAAAAAAADe4/vZpW7wi4ZMY/s1600/pinterest2.png"); background-repeat:no-repeat; }
      li.bloglovin { background-image:url("http://3.bp.blogspot.com/-t9T07aBtYhQ/UqV-p7oZ1vI/AAAAAAAADZ4/dxY8FhqL48E/s1600/bloglovin.png"); background-repeat:no-repeat; }
  
      .social:hover li { opacity:1; }
  
      .social li { transition-property: opacity; transition-duration: 500ms; }
      .social li a strong { opacity:0;
       transition-property: opacity; transition-duration: 300ms;
      }
  
      .social li:hover { opacity:0.7; }
      .social li:hover a strong { opacity:1; /*top:-10px;*/ }
  
      .search-form {
          position: relative;
          /*right: 200px;
          top: 200px;*/
          color:#000;
      }
  
      .search-field {
          background-color: transparent;
          background-image: url("http://4.bp.blogspot.com/-FlxbQrrwMzg/UpsuqWwMWbI/AAAAAAAADYY/BT5hA_2R3MQ/s1600/search_icon.png'");
          background-position: left;
          background-repeat: no-repeat;
          background-size: 24px 24px;
          border: none;
          cursor: pointer;
          height: 25px;
          margin: 0px 0;
          padding: 0px 0 0 34px;
          position: relative;
          -webkit-transition: width 400ms ease, background 400ms ease;
          transition:         width 400ms ease, background 400ms ease;
          width: 0;
          text-transform:uppercase;
          font-family:'karlaregular';
          font-size:12px;
          color:#000;
  
      }
  
      .search-field:focus {
          background-color: #fff;
          border-bottom: 1px solid #000;
          cursor: text;
          outline: 0;
          width: 230px;
          position:relative;
          height: 25px;
          text-transform:uppercase;
          font-family:'karlaregular';
          font-size:12px;
          color:#000;
      }
      .searchform
      .search-submit { 
      display:none;
      }
  
      .button{
          display:none;
      }
  </code></pre>
  
  <p>I'm sure there's a really simple solution to this (z-index?), but I can't find it...</p>
  
  <p>Any help would be greatly appreciated. </p>