HTML and CSS Reference
In-Depth Information
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
demo page.
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
Figure 4-61).
