Creating an overlaying floating div

I need to create an overlaying floating div that sits on top of my web site and stays at top:0px left:X%. I’m having a good amount of trouble figuring this out even though it seemed like it would be easy to do. Here’s my site structure:

<div id="Site">
     <div id="Shell">
          <div id="Label"></div>
          Insert rest of site here ...

So again the “Label” is about 500 x 500 and needs to float on top of everything and be 0px from the top but a certain percentage from side to side so that if the user resizes their browser the label kind of goes with it and the page still looks nice.

The “Shell” id is 800 px wide. Thanks.

Hi there

Have you tried to use a high z-index with absolute positioning?
Something like


You need to position the label absolutely, and give it a higher z-index than everything else, e.g.

#Label {
    position: absolute;
    top: 0px;
    left: 5%;
    height: 500px;
    width: 500px;
    z-index: 99;

If you want it positioned relative to “Shell”, you need to add position: relative; to #Shell’s CSS entry.

Note that <select> elements and some plug-ins (flash, quicktime, etc) will always appear above everything else in certain browsers (notably IE/Win). There is a hacky, kludgy fix for this, called an iframe shim - check it out on Google.

Hey thanks it worked like a charm being absolute; however, being relative it made the site all out of format. Anyone know why? Thanks again.

your label div should definitely be absolutely positioned, but if it is within a container which is relatively positioned, it won’t work as you want it to.

Why don’t you have your <div id=“label”> outside the div which has a relative position?

For example, if it is your <div id=“shell”> which is relatively positioned, try:

<div id=“Site”>
<div id=“Label”></div>

 &lt;div id="Shell"&gt;

      Insert rest of site here ...


if this doesnt answer your question, can you post your full css?

I see, it does answer my question, thank you. Would it work where I have it now, posted above, if I set the float:left? The percentage serves the same purpose though, making the position:relative and working with it that way would be just another way to accomplish the same task. Thanks again.