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.

3 Answers 3

#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

  • 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, 2010 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. Nov 24, 2010 at 1:53
  • Ok, you can set high z-indexes... But 2147483646?!
    – bjb568
    Apr 27, 2014 at 8:16
  • @bjb568 that is the highest possible z-index. See stackoverflow.com/questions/491052/…
    – karancan
    Jun 9, 2014 at 18:41
  • @karancan Isn't 3 enough? :P
    – bjb568
    Jun 9, 2014 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.

  • Thanks, but I'm only concerned with modern browsers.
    – Cyclops
    Nov 25, 2010 at 14:48

CSS Code

    background: url(img/flower.png) no-repeat;
    border:5px solid #000000;

Full Source...CSS Overlay


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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