[ Pobierz całość w formacie PDF ]
.F.qc 6/29/99 1:08 PM Page 422Part III &' Style Languages422Positioning PropertiesCSS2 provides an astonishing amount of control over the position of each object in adocument.You can put specific objects or specific types of objects in layers.Eachlayer can be moved independently of the other layers.The positionpropertydetermines how objects are arranged and can have one of these four keyword values:1.static: the default layout2.relative: objects are offset from their static positions3.absolute: objects are placed at a specific position relative to the box they recontained in4.fixed: objects are placed at a specific point in the window or on the pageRelative PositioningAs a document is laid out, the formatter chooses positions for items according tothe normal flow of the objects and text.This is essentially the default staticformatting of objects used by most document creators.After this has beencompleted, the objects may be shifted relative to their current position.Thisadjustment in an object s position is known as relative positioning.By using relativepositioning, altering the position of an object has no effect on the objects followingit.Thus boxes can overlap, since relatively positioned boxes retain all of theirnormal flow sizes and spacing.You can generate a relatively positioned object by setting the positionproperty torelative.Its offset will be controlled by the left, right, top, and bottomproperties.By changing these properties with JavaScript you can even moveobjects and layers on your documents.You can make images or text move, appearand disappear, or change in mid-stream.For example, this rule moves the TITLEelement 50 pixels up and 65 pixels to the left from where it would normally be.TITLE { position: relative; top: 50px; left: 65px}Absolute PositioningAn absolutely positioned element is placed in reference to the block that containsit.It establishes a new containing block for boxes it contains.The contents ofabsolutely positioned elements do not flow around other boxes.This may causethem to obscure the contents of other boxes displayed in the document.Absolutelypositioned elements have no impact on the flow of their following siblings, soelements that follow an absolutely positioned one, act as if it were not there.Forexample, this rule puts the top left corner of the AUTHORelement 60 pixels downand 140 pixels to the right of the top left corner of the box it s contained in.AUTHOR { position: absolute; top: 60px; left: 140px }3236-7 ch13.F.qc 6/29/99 1:08 PM Page 423Chapter 13 &' Cascading Style Sheets Level 2423Fixed PositioningElements with fixed position are placed at coordinates relative to the window orpage on which they re displayed.If you are viewing a document composed ofcontinuous media, the fixed box will not move when the document is scrolled.If thefixed box is located on paged media, it will always appear at the end of each page.This enables you to place a footer or header on a document, or a signature at theend of a series of one-page letters.For example, this rule puts the top-left corner ofthe REFRAINelement 300 pixels down and 140 pixels to the right of the top-leftcorner of the window it s displayed in or the page it s printed on.REFRAIN { position: fixed; top: 300px; left: 140px}Stacking Elements with the Z-Index PropertyThez-indexproperty controls the stacking order of positioned boxes.To changethe default z-index value, you set z-indexto an integer like 2.Objects with larger z-index values are placed on top of objects with smaller z-index values.Whether theobjects on the bottom show through is a function of the background properties ofthe object on top of them.If the backgrounds are transparent, at least some ofwhat s below will probably show through.Listing 13-2 is a style sheet that uses absolute positioning with a z-indexto createa multi-part overlay of the Shakespearean sonnet.The result is shown in Figure13-3.It s certainly not as nice as the version that merely allows the browser to layout the sonnet.Absolute positioning should be used with extreme care.I d reallyonly recommend it for print media where you ll be distributing the paper thatcomes out of your printer rather than the electronic files.Listing 13-2: Shakespeare s sonnet with a z-index stylesheet#st1 { position: absolute;top: 160px;left:200px;height: 100px;width:200px;overflow: auto;z-index: 2}#st2 { position: absolute;top: 210px;left:50px;height: 100px;width:200px;overflow: auto;z-index: 3}#st3 { position: absolute;top: 210px;left:250px;Continued3236-7 ch13.F.qc 6/29/99 1:08 PM Page 424Part III &' Style Languages424Listing 13-2 (continued)height: 100px;width:200px;overflow: auto;z-index: 4}REFRAIN { position: absolute;top: 300px;left:200px;height: 100px;width:200px;overflow: auto;z-index: 5}Using absolute positioning ordered by z-index, you can control the stacking order oftext boxes.Counters and Automatic NumberingCSS2 enables you to automatically generate some content.For instance, you canuse the style sheet to create outlines that are properly indented with differentnumbering systems for each level of the outline.The counter-incrementproperty adds one to a counter.The contentpropertyinserts the current value of a named counter by using either the counter(id)orcounter(id, list-style-type)functions as values.Finally, the counter-resetproperty sets a counter back to 0.For example, let s suppose you want to number each VERSEin a poem starting fromone, but reset the counting in each new STANZA.and the REFRAIN.You can do thatwith the following rules:VERSE {counter-increment: verse-num}STANZA {counter-reset: verse-num}REFRAIN {counter-reset: verse-num}VERSE:before {content: counter(verse-num) }You can reset back to a number other than 0 by specifying the integer to reset toafter the counter name in counter-reset.For example, to reset the counter to -10:VERSE {counter-reset: verse-num -10}3236-7 ch13.F [ Pobierz całość w formacie PDF ]