Почему блок не поверх остальных?

Question

[smoklew]

Почему блок #lips не становится поверх всех блоков?

<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

[Pure_noob]

z-index ?

Comments

[smoklew]

#lips
{
position:absolute;
top:10px;
left:999px;
width:15%;
z-index:9999;
}

Answer 2

[Кирилл Туровников]

У .header стоит overflow:hidden; думаю проблема в этом, position:absolute;и z-index:9999; не помогут

Answer 3

[Турар Абу]

У <header class="header"> стоит стиль overflow: hidden;
и помимо этого, у <img id="lips" /> задан стиль left: 999px;
Скорее всего, изображение выходит за рамки контейнера и исчезает