How to make a div appear higher on the page in front the content higher in the flow?

Question

It's a pretty basic design question, but still: I have a header in one file and a few pages which load in succession in other files. I want to add a progress indicator (just an image of a 1/3, 2/3 and 3/3 filled bar) to each of these pages, but I want the bar appear on header, which is in different file and higher in flow, so negative margins+z-index do not work. How can I make my indicator, which logically belongs to the page under header, appear on header?

Answer 1

how about position:absolute layout ?

Answer 2

You probably need to position the progress bar in absolute coordinates, as in

.processBar
{
  position: fixed;
  left: 50%;
  top: 10%;
  z-index: 1000;
}

You can change the left and top settings to your liking. Eventually you'll end up with the status bar hovering over the header.

EDIT: cdonner is correct, position: fixed positions the element according to the browser window

Answer 3

Absolute positioning takes your element out of the browser flow (browser doesn't consider this element in laying out neighboring elements) so you can position it wherever you like.

The offset position of an absolutely position element is calculated relative to the nearest parent that is absolutely/relatively positioned (if there isn't any, relative to document).

So yeah, as the others have pointed out, you can use position: absolute and a position in terms of top and left.