Search code examples
cssbackground-imagecss-positionz-index

Z-index absolute positioning background image

I would like to have the Wrapper-Top layer on top of the other one. I set z-index and position, which should be sufficient. Am I missing something? Here is the website: Thank you in advance.

EDIT: here is the code I used:

<body>
  <div class="Wrapper-Top">
  </div>
  <div class="Wrapper-Middle">
  hjklhjkhkjlhjkl
  </div>
</body>

.Wrapper-Top {
    min-width: 980px;
    width: 100%;
    height: 179px;
    top: 0px;
    left: 0px;
    background:url(img/header-bg.png)
    repeat-x 50% 0%;
    z-index: 20;
}
.Wrapper-Middle {
    min-width: 980px;
    width: 100%; 
    height: 300px;
    margin: 0 auto;
    background: #eee;
    top: 160px;
    left: 0px;
    position: absolute;
    z-index: 10;
    text-align: center;
}
Solution

  • You are missing a position attribute on .Wrapper-Top.

    z-index on MDN

    Initial value: auto

    Applies to: positioned elements

    Inherited: no

    When it isn't present, your z-index:20 in .Wrapper-Top is doing nothing.