up vote 1 down vote favorite
share [g+] share [fb]

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.

link|improve this question
feedback

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

link|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
feedback
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.

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

Your Answer

 
or
required, but never shown
discard

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