Week 10

Creating Positioned Layouts

10-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

10-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

10-4

10-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

10-6

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

10-8

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

10-10

10-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

10-12

10-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

10-14

10-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

10-16

10-17

Specifying Visibility

• The visibility property specifies whether an element is displayed in the browser

10-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

10-19

10-20

10-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

10-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

10-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