Z-index absolute positioning background image

css background-image css-position z-index

12,320

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.

12,320

Author by

user2330401

Updated on June 04, 2022

Comments

user2330401 about 2 years

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;
}

user2330401 about 11 years

Thanks, havent thought of that!
user2330401 about 11 years

Got it...thought that element is positioned when its position is specified(like top and left).