Why is the block not on top of the rest?

Question

css

Why doesn't the #lips block appear on top of all blocks?

<div class="wrapper">
    <header class="header"> 
      <div class="header-fix">
        <div class="header-logo">
          <a href="index.html">
            <img src="img/header-logo.png" alt="">
          </a>
            <img id="lips" src="img/lips.png">
        </div>
      </div>


    </header>
    <main class="main"> 

    </main>

.header
  {
  margin:auto;
  overflow:hidden;
  }
  .header-fix
  {
  max-width:1300px;
  margin: auto;
  position:relative;

  }
  .header-logo
  {
  float:left;
  }
  .header-logo > a > img
  {
  width:100%;
  height:auto;
  }
  #lips
  {
  position:absolute;
  top:10px;
  left:999px;
  width:15%;
  z-index:9999;
  }
  .main
  {
  clear:both;
  width:95%;
  margin:auto;
  overflow:hidden;
  z-index:2222;
  }

Answer 1

z-index ?

Answer 2

.header should overflow:hidden;think the problem is this, position:absolute;and z-index:9999;will not help

Answer 3

Y has <header class="header">a style overflow: hidden;
, and in addition, has a <img id="lips" />style. left: 999px;
Most likely, the image goes beyond the container and disappears