HTML and CSS Reference
Fixed and Inherited Positioning
An element placed with absolute or relative positioning scrolls with the document con-
tent. Alternatively, you can fi x an element at a specifi c spot in the browser window while
the document scrolls by setting the value of the position property to fixed . Note that
older browsers might not support fi xed positioning, so you should use it with some cau-
tion if it is a crucial part of your Web page layout.
You also can assign the position property to inherit so that an element inherits
the position value of its parent element. You'll explore both positioning styles on the
To explore fixed and inherited positioning:
1. Click the reset button within the demo page to return both boxes to their default
locations in the Web page.
2. Select fixed from the list box for the outer element, and then enter 300 for the
left and top values.
The red box is moved out of the document flow and placed at the window coordi-
nates (300, 300). The sample paragraph moves up into the space previously occu-
pied by the red box.
Trouble? If you are running an older browser, you might not see any change in
the position of the red box.
3. Select inherit from the list box for the inner element, and then enter 600 for the
left value and 300 for the top value.
The yellow box inherits the position style of its parent. In this case, it uses fixed
positioning and is placed to the right of the outer red box.
Trouble? If your browser does not support the inherit position style, fix the
position of the inner box by choosing fixed from the list box for the inner object.
4. Resize the browser window so it's small enough to force the browser to display
vertical and horizontal scroll bars. Scroll through the document and verify that
the two color boxes remain fixed at the same location within the window (see