Take the 2-minute tour ×
Webmasters Stack Exchange is a question and answer site for pro webmasters. It's 100% free, no registration required.

I'm trying to figure out how to create a div that overlays the page, staying in one place when the page scrolls, such as used in this article: Top 5 Botched PC Game Launches. (You will see a bar at the top that doesn't move, with the logo, where gamers call home).

I'm not even sure what the correct terminology is - it's probably not overlay :) But whatever it is, it appears to be done with CSS only, as it shows up when Javascript is disabled.

share|improve this question

3 Answers 3

up vote 2 down vote accepted
#status-bar {
  width: 100%;
  height: 36px;
  position: fixed;
  top: 19px;
  left: 0;
  z-index: 2147483646;
  -moz-box-shadow: 0px 0px 3px #8a8a8a;
  -webkit-box-shadow: 0px 0px 3px #8a8a8a;
  box-shadow: 0px 0px 3px #8a8a8a;
  background: transparent url("/images/Elements/status-bar/status-bar-bg.png") repeat-x;
}

Page source.

Related reading: CSS Positioning 101 at A List Apart

share|improve this answer
    
Thanks, so the key is position:fixed. Is the z-index really necessary, or did that come from the sample page? Also, is there any specific terminology for that technique (like overlay or something)? –  Cyclops Nov 24 '10 at 1:45
    
z-index is necessary to keep stacking order. But the value don't need to be so high, just high enough to keep element into top of others (which usually have z-index 1). I don't know a specific name to this technique. –  Dave Nov 24 '10 at 1:53
    
Ok, you can set high z-indexes... But 2147483646?! –  bjb568 Apr 27 at 8:16
    
@bjb568 that is the highest possible z-index. See stackoverflow.com/questions/491052/… –  karancan Jun 9 at 18:41
    
@karancan Isn't 3 enough? :P –  bjb568 Jun 9 at 19:04

Little word of warning. If for some reason (I'm hoping IE6 gets fully deprecated) you have a real need to support IE6, that browser does not support position:fixed. You might want to use the "_" css property hack to just make it position absolute ( _position:absolute; ) for the case of IE6. Some other properties tweaking might be needed to look similar to non IE6 versions, and to behave in a way that at least is ok to go.

share|improve this answer
    
Thanks, but I'm only concerned with modern browsers. –  Cyclops Nov 25 '10 at 14:48

CSS Code

.picColor{
    width:320px;
    height:240px;
    background: url(img/flower.png) no-repeat;
    border:5px solid #000000;
}
.picColor:hover
{
    opacity:0.9;
    background:#FFFFFF;
    width:320px;
    height:240px;
}

Full Source...CSS Overlay

Justin

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.