How to create an overlay div making use of CSS just (no Javascript)?

I'm attempting to identify just how to create a div that superimposes the web page, remaining in one area when the web page scrolls, such as made use of in this write-up : Top 5 Botched PC Game Launches. (You will certainly see a bar on top that does not relocate, with the logo design, where players call residence ).

I'm not also certain what the proper terms is - it is possibly not overlay :) But whatever it is, it seems performed with CSS just, as it turns up when Javascript is impaired.

0
2019-05-13 02:19:05
Source Share
Answers: 2

Little word of caution. If for one reason or another (I'm wishing IE6 obtains totally deprecated) you have an actual demand to sustain IE6, that internet browser does not sustain placement :dealt with. You could intend to make use of the "_" css building hack to simply make it place outright (_ placement :outright ;) for the instance of IE6. A few other buildings tweaking could be required to look comparable to non IE6 variations, and also to act in such a way that at the very least is alright to go.

0
2019-05-17 22:04:02
Source
#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 resource.

Relevant analysis: CSS Positioning 101 at A List Apart

0
2019-05-17 12:23:48
Source