title: Flexbox with Picture and Overlapping Object
body: <p>I try to put an image and overlapping objects side by side. And then when device width is smaller enough, it puts the image on top of overlapping objects. In this case the overlapping objects are search input (with completion capability that we don't want to discuss here).</p>
  
  <p>So far I got this <a href="http://jsfiddle.net/ethereal1m/cwurw36v/1/" rel="nofollow">my jsfiddle link</a></p>
  
  <p>my css code:</p>
  
  <pre><code>#banner-wrapper {
      order: 1;
       height: 70.7833px;
       width:40px;
       margin-left: 5%;
  }
  img {
      width: 40%;
  }
  
  @media all and (min-width: 360px) {
      #banner-wrapper {
          flex: 2 1 auto;
      }
      #peoplefind-sidebar {
          flex: 2 1 auto;
      }
  }
  
  @media all and (min-width: 360px) {
      #banner-wrapper, #banner-wrapper&gt;* {
          order: 1;
      }
      #peoplefind-sidebar,#peoplefind-sidebar &gt; *,.people-search   {
          order: 2;
      }
  }
  
  #header-wrapper {
      display: flex;
      flex-flow: row wrap;
      width: 100%;
      display: -webkit-flex;
      position: relative;
      z-index: 0;
  }
  
  #peoplefind-sidebar {
      display: -webkit-flex;
      display: flex;
  }
  
  .people-search {
      top: 50%;
      height: 35%;
      width: 22% !important;
      border: 1px solid #666;
      border-radius: 3px;
      padding: 3px;
      position: absolute;
  }
  
  #peoplefind-input {
          background: transparent;
          z-index: 1;
  }
  
  #peoplefind-input-x {
          color: #CCC; background: transparent; 
  }
  
  #side-peoplefind-submit {
      position: absolute; 
      top: 50%;
      height: 30%;
      left: 80%;
  }
  </code></pre>
  
  <p>its html counterpart: </p>
  
  <pre><code>&lt;div id="header-wrapper"&gt;
      &lt;div id="banner-wrapper"&gt;
          &lt;img class="nav-logo-image" id="logo-img" src="http://images.freeimages.com/images/previews/ba3/sunflowers-3-1393952.jpg" alt="logo"&gt;
      &lt;/div&gt;
      &lt;div id="peoplefind-sidebar"&gt;
          &lt;form id="peoplefind-form" action="peoplefind/profile" method="post"&gt;
              &lt;input autocomplete="off" id="peoplefind-input" class="people-search" placeholder="Find contacts, item_id, and word search here" name="people_search"  type="text"&gt;
              &lt;input id="peoplefind-input-x" class="people-search" name="people_search" disabled="disabled"  type="text"&gt;
              &lt;button id="side-peoplefind-submit" type="submit"&gt;Find&lt;/button&gt;
          &lt;/form&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>This one still doesn't work. As we decrease the size of the window to small size, it doesn't put the image on the top of the overlapping object.</p>
  
  <p>Any ideas?</p>