Survey
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
Chapter 10 Creating Positioned Layouts Principles of Web Design, 4th Edition Objectives • Understand basic positioning concepts • Apply CSS positioning properties • Build a page layout with positioned elements Principles of Web Design, 4th Edition 10-2 Positioning Elements Principles of Web Design, 4th Edition 10-3 Positioning Elements • The CSS positioning properties give you control over the way element boxes are laid out in a Web page • You can control the positioning of the elements and remove them from the normal flow of elements on the page • You can also build pages that have elements positioned at different places in a Web page without using tables Principles of Web Design, 4th Edition 10-4 Understanding the Normal Flow of Elements • The browser lays out element boxes from top to bottom and left to right until all elements that comprise the Web page have been displayed • In the normal flow for block-level elements, boxes are laid out vertically one after the other • Each box’s left edge touches the left edge of the containing element unless the box is floated or the layout model is right to left Principles of Web Design, 4th Edition 10-5 Principles of Web Design, 4th Edition 10-6 Specifying Box Position Type • The position property lets you specify the type of positioning for an element if it will be something other than the default positioning type, which is static Principles of Web Design, 4th Edition 10-7 Principles of Web Design, 4th Edition 10-8 Specifying Box Position Offsets • The box offset properties let you specify the exact positioning values for any element that has a position property set to absolute, fixed, or relative div {position: absolute; left: 130px; top: 100px; background-color: #ffcc33;} Principles of Web Design, 4th Edition 10-9 Principles of Web Design, 4th Edition 10-10 Specifying Box Position Offsets (continued) • The following style rule shows the addition of the width property to further define the appearance of the element div {position: absolute; left: 130px; top: 100px; width: 100px; background-color: #ffcc33;} Principles of Web Design, 4th Edition 10-11 Principles of Web Design, 4th Edition 10-12 Absolute Positioning • When you specify absolute positioning, an element’s position is explicitly stated with respect to its containing box • An absolutely positioned element is removed from the normal document flow and has no impact on other elements • An absolutely positioned element establishes a new containing box for child elements Principles of Web Design, 4th Edition 10-13 Principles of Web Design, 4th Edition 10-14 Fixed Positioning • The containing box for a fixed element is always the browser window • Fixed elements stay in the same place at all times, regardless of how the user scrolls the document • Fixing an element lets you create a frametype layout, where a content element can be scrolled independently of an adjoining navigation element Principles of Web Design, 4th Edition 10-15 Principles of Web Design, 4th Edition 10-16 Relative Positioning • The relative position value lets you shift an element from its default position in the normal flow to a new position within the browser window • The new position is relative to the element’s default position • The offset properties let you adjust the position of the element Principles of Web Design, 4th Edition 10-17 Principles of Web Design, 4th Edition 10-18 Specifying Visibility • The visibility property specifies whether an element is displayed in the browser Principles of Web Design, 4th Edition 10-19 Specifying Stacking Level • The stacking level is the ordering of elements on the z-axis, from front to back as the user faces the computer screen Principles of Web Design, 4th Edition 10-20 Principles of Web Design, 4th Edition 10-21 Principles of Web Design, 4th Edition 10-22 Summary • CSS positioning properties can be used with programming scripts • The normal flow dictates the way in which elements normally are displayed in the browser window • When you remove an element from the normal flow, you may see unexpected behavior from other elements that are following the normal flow Principles of Web Design, 4th Edition 10-23 Summary (continued) • Pixels are the most convenient measuring unit for offset values • Use the width and height properties to specify element sizes • Each containing box sets its own context for positioning – For example, an absolutely positioned box can contain elements that follow the normal flow Principles of Web Design, 4th Edition 10-24 Summary (continued) • Fixed positioning “pastes” the element to one position, regardless of how the user scrolls • Relative positioning, stacking levels, and visibility are normally used with scripting languages to create dynamic effects Principles of Web Design, 4th Edition 10-25