tailieunhanh - Sams Teach Yourself CSS in 24 Hours- P7

Sams Teach Yourself CSS in 24 Hours- P7: Times have changed, thankfully, since those Dark Ages of CSS. All major browsers as well as some minor ones have increased support for Cascading Style Sheets in the latest versions. Web developers are aware of CSS and the vital role they play in designing great Web pages, and presumably you’ve got some idea of how important they are if you’ve bought this book. | 282 Hour 16 Fixed Positioning In fixed positioning a box placed on the screen doesn t move even if the rest of the page moves it seems to float on top of the page in a fixed location. This is useful if you want to create a menu bar or graphic that never leaves the page. A box placed according to fixed positioning is located in relation to the whole page not to its containing block or its original position. Like absolute positioning and unlike relative positioning no space is set aside for the box in its normal flow location. The style sheet in Listing uses fixed positioning and also adds a very large bottom margin to the outer box. This is so that the effects of the fixed positioning can be seen by using the scrollbars to move the page. Listing Style Sheet Using Fixed Positioning to Prevent an Element from Scrolling I I inner position fixed top 4em left 4em outer margin-bottom 25em The effects of fixed positioning are shown in Figure . I recommend testing this yourself at http l6 to see how it works using one of the newer browsers that support CSS positioning. Warning for Netscape 4 and Internet Explorer 4 and 5 Older versions of Netscape and Internet Explorer don t support fixed positioning. The top right bottom and left Properties As shown in the previous examples the top and left properties can be used to set the distance by which a positioned box is placed in relation to the context box. The bottom and right properties also can be used to designate offsets. The types of values that can be given to these offset properties are shown in Table . The default is auto which means that it is up to the browser to determine where something should be placed which is to say it places the box where it belongs according to normal flow. Page Layout in CSS 283 Figure Objects fixed in position don t move when the rest of the page scrolls. 16 Table Values for the Offset Properties Value Effect .