Tell me more ×
Webmasters Stack Exchange is a question and answer site for pro webmasters. It's 100% free, no registration required.
up vote 1 down vote favorite

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

2 Answers

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
up vote 1 down vote

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

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.