Transcript Chapter 10

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