title: Give priority to one of two element using the property 'position' in CSS
body: <p>I am working on a project and I got to a part where I am facing a problem.
  Normally on a normal screen, my work looks like this when I hover the avatar beside the searchbar:</p>
  
  <p><a href="https://i.stack.imgur.com/QyNJK.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/QyNJK.png" alt="On a normal screen"></a></p>
  
  <p>The problem happens when I am using a small screen, the 'dropdown menu' which contains the 'my account', 'my wishlist' and 'logout' buttons does not appear when I click on or over the avatar:</p>
  
  <p><a href="https://i.stack.imgur.com/TgrbY.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/TgrbY.png" alt="On a small screen"></a></p>
  
  <p>The HTML/CSS code is the looks this (It has been reduced to detect mistake I have made easily):</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>/*Avatar - Dropdown menu*/
  .header-user-menu {
    float: right;
    position: relative;
    background-color: #3a3c3e;
    width: 75px;
    height: 40px;
    border-radius: 2px;
  }
  .header-user-menu:before {
    content: '';
    width: 0;
    height: 0;
    top: 18px;
    left: 15px;
    position: absolute;
    border: 5px solid transparent;
    border-top-color: #fff;
  }
  .header-user-menu ul {
    display: none;
    font: bold 13px Arial, Helvetica, sans-serif;
    background-color: inherit;
    list-style: none;
    position: absolute;
    text-align: center;
    width: 125px;
    top: 25px;
    right: 0;
    padding: 10px;
    border-radius: 2px;
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
  }
  .header-user-menu:active ul,
  .header-user-menu:hover ul,
  .header-user-menu.show ul {
    display: block;
  }
  .header-user-menu img {
    border-radius: 50%;
    position: absolute;
    top: 6px;
    max-width: 28px;
    right: 10px;
  }
  /*Search Bar*/
  .container-1 {
    width: 250px;
    vertical-align: middle;
    white-space: nowrap;
    position: relative;
    float: right;
    margin-right: 10px;
  }
  .container-1 input#search {
    width: 250px;
    height: 40px;
    background: #3a3c3e;
    border: none;
    font-size: 10pt;
    float: left;
    color: #63717f;
    padding-left: 45px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="header-first-bar"&gt;
    &lt;div class="header-limiter"&gt;
      &lt;div class="header-user-menu"&gt;
        &lt;img src="images/avatar.jpg" alt="User Image" /&gt;
        &lt;ul&gt;
          &lt;li&gt;&lt;a href="account.php"&gt;My account&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;My wishlist&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;a href="logout.php" class="highlight"&gt;Logout&lt;/a&gt;
          &lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
      &lt;div class="container-1"&gt;
        &lt;span class="icon"&gt;&lt;i class="fa fa-search"&gt;&lt;/i&gt;&lt;/span&gt;
        &lt;input type="search" id="search" placeholder="Search..." /&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Kindly help me find what is wrong with my code. Thanks</p>