Presentation is loading. Please wait.

Presentation is loading. Please wait.

Week 10 Creating Positioned Layouts

Similar presentations

Presentation on theme: "Week 10 Creating Positioned Layouts"— Presentation transcript:

1 Week 10 Creating Positioned Layouts

2 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

3 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


5 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


7 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;}


9 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;}


11 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


13 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 frame-type layout, where a content element can be scrolled independently of an adjoining navigation element


15 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


17 Specifying Visibility
The visibility property specifies whether an element is displayed in the browser

18 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



21 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

22 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

23 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

Download ppt "Week 10 Creating Positioned Layouts"

Similar presentations

Ads by Google