ansaurus

Question

Answer 1

A:

Actually, documentation for position:fixed property is very clear: Generates an absolutely positioned element, positioned relative to the browser window.

So, coordinates are calculated relative not to the body, but to the window.

How do I make the "sidebar" to stay inside the "wrap", yet be fixed?
The question seems strange. Even if 'sidebar' stays inside 'wrap' initially, user can always scroll down: 'wrap' will move to the top of the window (and possible disappear), while 'sidebar' will be in the exact same spot on user's screen.

edit
An example of element with 'fixed' position is "Welcome to ..." top bar when you come first time to any stack exchange site (e.g., cooking).

Nikita Rybak 2010-10-06 01:28:43

Answer 2

A:

Give a position: absolute to "siderbar", it should do the trick.

Some info regarding position relative + position absolute.

SteD 2010-10-06 01:34:31

Answer 3

+1 A:

The idea, as @Nikita implies, is not to use position: fixed but instead use position: absolute.

For this to work you'll also need to position the parent element, #wrap with position: relative' in order to have the#sidebar` position relative to to the parent element not the window.

JS Bin demo of position: absolute, note that #sidebar is fixed within the #wrap div, and scrolls with the page.
JS Bin demo of position: fixed, note here that #sidebar fixed to the view-port, and remains fixed as the page scrolls.

David Thomas 2010-10-06 01:38:03

ansaurus

tags:

views:

answers:

Position:fixed inside the wrap block

related questions