Home/ Questions/Q 709629
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-14T04:31:27+00:00

Hope someone has an easy answer on this. I have a header image which

  • 0

Hope someone has an easy answer on this. I have a header image which is just a 75px high gradient with a fade on the bottom. I have it set as the background image on my header and I want to throw in a left-sidebar on my page. There is a transparency on the header image and when I have my sidebar I can’t get it to sit behind the header. You can see in this screenshot:

sidebar

The green sidebar won’t “sit” behind the header. I have the header z-index set to 99 and the sidebar to 1. I tried the reverse to make sure I didn’t mix up my numbers but that didn’t work. Both are absolutely positioned. I’m attaching their CSS selectors in the hopes someone has an easy answer. Am sure I’m missing something basic:

div.header {
 z-index: 99;
 background: transparent;
 background-image: url(images/header_bg.png);
 position: absolute;
 height: 85px;
 width: 100%;
 font-family: Helvetica, Verdana, Arial, sans-serif;
}

div#leftsidebar {
 height: 400px;
 border-right-style: dashed;
 border-right-width: 1px;
 z-index: -1;
 margin-top: 75px;
 width: 200px;
 position: absolute;
 background-color: #66ff66;
}

Thanks.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Okay, the answer was, and none of you guys would have known this, that my sidebar was inside the header and obviously it couldn’t sit behind its parent ‘s background. Makes sense. I wouldn’t have done it on purpose but think that when I was writing the HTML I pushed the header tag way down and didn’t realize that I was writing my sidebar inside of it. Stupid mistake.

    • 0