| |
Chapter 12
Dynamic Positioning
CSS (Cascading Style Sheets) provides the syntax for specifying the precise positions of HTML elements. Dynamic positioning uses the object model
to access and manipulate the positions of elements in the document through the CSS object model and through the rendered positions of the elements on the screen.
Precise control over positioning elements with HTML was pioneered
in Microsoft Internet Explorer 3.0 using the HTML Layout control. The
HTML Layout control was designed as an ActiveX control that interpreted an
early version of the CSS positioning syntax. An ActiveX control was used rather
than embedding the support directly into the browser to give the W3C (World
Wide Web Consortium) more time to define and finalize a positioning syntax. In
late 1996, a syntax was agreed upon in the W3C CSS Positioning (CSS-P)
working draft. Scott Furman, a representative of Netscape, and I, as Microsoft's
representative, cowrote the draft. Internet Explorer 4.0 and Netscape
Navigator 4.0 both support the CSS-P working draft for positioning elements, so
pages authored using CSS-P have a fair degree of interoperability between
browsers. There are still some minor differences between browsers, however, in the
exact rendering of an element's size and position.
The CSS-P working draft specifies the CSS syntax for defining the
initial placement of elements on the page; it does not define the scripting model.
The object model exposed in Netscape Navigator 4.0 for moving positioned
elements is different from the model exposed in Internet Explorer 4.0.
Netscape Navigator's model provides a subset of the functionality available in
Internet Explorer.
The CSS-P working draft defines three types of positioning: static,
absolute, and relative. Static positioning is the default and corresponds to the
traditional way HTML documents are laid out. In absolute positioning, an
element is taken out of the normal flow of the document and positioned according
to the parent coordinate system. The absolutely positioned element has no
effect on any of its surrounding elements in the document. In relative
positioning, an element stays in the flow of the document and is positioned relative to
its normal position in the flow. When the document is resized, a relatively
positioned element may move and even change in shape as the document
is reflowed. Absolutely and relatively positioned elements create coordinate
systems for positioning any child elements they might have.
This chapter introduces the CSS-P properties and the scripting model
for controlling the location of any element. The following topics are covered
in this chapter:
- CSS
positioning This section discusses the CSS enhancements for controlling the positions of elements. CSS positioning supports two new ways to position an element: relative, which positions an element relative to the element's normal location in
the document's flow, and absolute, which moves the element
outside the flow, where it can be positioned with precise accuracy. This
section introduces the CSS positioning properties and the relationship between these two positioning models.
- Scripting CSS
positioning CSS positioning properties can be dynamically manipulated through the Dynamic HTML object model. This section shows you how to animate text and graphics by using timers and how to respond to user events to enable drag-and-drop operations.
- The rendering
context This section demonstrates the
relationship between an element's position and its surrounding elements
and introduces the rendering relationship between elements, which defines how an element's position is determined in the document.
[Содержание]
|
