Приглашаем посетить
Футбол (football-2000.niv.ru)

CSS Positioning

CSS Positioning

The CSS-P working draft defines extensions to style sheets to provide increased positioning control over HTML elements. Absolute and relative positioning allow the Web author to precisely control the location and size of an element and to overlap elements. Combining these enhancements with scripting allows the animation of elements. This section provides a brief introduction to using the CSS positioning enhancements.

CSS Positioning Properties

The CSS-P working draft defines new CSS properties supported by both Internet Explorer 4.0 and Netscape Navigator 4.0. The following table lists these properties; the default value for each property is shown in boldface.


Property Allowable Values Applies To Description
position static | absolute | relative All elements Specifies whether the element is positioned normally in the flow (static), relative to its normal position in the flow (relative), or outside the flow (absolute).
top, left auto | <length> | <percentage> All elements with position set to absolute or relative Define the top and left positions of the element relative to its parent rendering context.
width, height auto | <length> | <percentage> All block elements, replaced elements (for example, IMG elements and intrinsic controls), and elements with position set to absolute Define the width and height of the element. Percentages are relative to the parent rendering context.
clip auto| rect (top right bottom left) All elements with position set to absolute Defines the clipping region for the element.
z-index auto | number All elements with position set to absolute or relative Specifies an element's position overlapping or being overlapped by other elements.
visibility inherit | visible | hidden All elements Specifies whether the element is visible. A hidden element is not removed from the document's flow.
overflow visible | hidden | auto | scroll All elements with position set to absolute and all block elements Specifies whether scrollbars are displayed if the contents do not fit in the element.

Positioning Elements

Traditionally, most elements in HTML are positioned relative to previous elements in the flow of the document. One exception to this rule is the ability to align images and other objects and have text wrap around them. With the introduction of CSS positioning, elements can now be positioned on a fixed plane separate from the document's flow or offset from their traditional position in the document. CSS positioning allows elements to overlap and provides Web authors with more precise control over the layout than was previously possible.

As mentioned, the CSS position property takes one of three values: static, absolute, or relative. Static positioning, the default, has no effect on the traditional layout of the HTML document.

Relative positioning is used to offset an element from its normal position in the flow. Setting an element's position value to relative does not by itself change the layout, but if you also set the top or left property, the element is offset from its normal position in the flow. In the text in Figure 12-1, one word is relatively positioned with offsets of 10 pixels in both the x and y directions. Notice that the rest of the document is laid out just as it would be if the word wasn't offset. Relative positioning is especially useful when you are animating elements such as images near their normal positions in the document.

CSS Positioning

Figure 12-1. A relatively positioned element.

Absolute positioning is used to specify a fixed location for the element outside the flow of the document. In the text in Figure 12-2, one word is absolutely positioned near the upper left corner. Notice that no space is set aside for this word in the flow.

CSS Positioning

Figure 12-2. An absolutely positioned element.

Because absolutely positioned elements are positioned outside the flow, the location of the element within the document's source becomes less important. The element should be placed in the source in a location that would provide reasonable results on down-level browsers that do not recognize the positioning enhancements and therefore display the image in the flow of the document.

In Internet Explorer 4.0, all elements in the body of the document support static and relative positioning. However, only the following elements support absolute positioning:

To absolutely position text, you should use a Span or DIV element. In general, the Span and DIV elements can be used interchangeably, but when you are deciding whether to use Span or DIV, consider the expected appearance of the element in down-level browsers. If the text requires a break before it and a break after it, a DIV element should be used; if the text can appear in the flow of the paragraph, a Span element should be used. The document should always be tested on all target platforms to ensure that it displays adequately.

Defining Coordinate Systems

Every element that is absolutely or relatively positioned must be positioned relative to another element or position in the document. The location from which the element is offset is called the root of the element's coordinate system. By default, relatively positioned elements have their root based on their normal flow position in the document. Therefore, if the document is reflowed, the root of the coordinate system as well as all child elements within that coordinate system will move.

Absolutely positioned elements are positioned with respect to some containing element's coordinate system. The upper left corner of the document defines the default coordinate system for all absolutely positioned elements. Whenever an element is relatively or absolutely positioned, a new coordinate system is defined for all elements it contains.

Size and Position Properties

When an element is positioned either absolutely or relatively, its top and left properties specify the offset of the element from the upper left corner of the coordinate system. The width and height properties define the physical width and height of the element as it is rendered on the screen. When you are using relative sizes, the width and height properties are interpreted relative to the size of the element defining the coordinate system. The top, left, width, and height properties can be specified as a percentage or in any of the units (for example, points, pixels, and ems) defined by CSS. Figure 12-3 shows the top, left, width, and height properties of two nested DIV elements.

CSS Positioning

Figure 12-3. Nested coordinate systems defining the roots for the positions and sizes of elements.

Automatic Sizing

For the top and left properties, the default auto value is the element's normal position in the flow. With top and left both set to auto, a relatively positioned element is displayed the same as a static element, and an absolutely positioned element is displayed outside the flow but anchored at the position it would have as a static element. If the width or height property is omitted, the element is automatically sized based on its contents.

The visibility Property

By default, an element is visible based on whether its parent element is visible. For example, hiding the Body element by setting the visibility property to hidden also hides all the contents in the document. You can override this inheritance by explicitly setting an element's visibility property to hidden or visible, rather than the default, inherit. When the visibility property is explicitly set, the element overrides any inherited value and is displayed or hidden appropriately.

The z-index Property

The z-index property defines the graphical z-order, or overlapping, of elements in relation to other elements. Every coordinate system defines a new z-ordering space for the rendered elements, thereby making the z-ordering hierarchical. For example, if a DIV element is absolutely positioned on top of the body's contents, the contents of the DIV element cannot appear behind the text in the body. All the elements within the DIV element can only be positioned relative to the DIV element's coordinate system.

By default, all elements that define a coordinate system, including the Body element, are positioned with a z-index of 0. Other elements can be positioned behind the text by having a negative z-index value. Elements whose z-index values are not specified are implicitly assigned z-index values according to their order in the source document. Therefore, an element that is positioned later in the document is displayed above any elements positioned earlier.

Clipping Regions

Each absolutely positioned element has a clipping region associated with it. The purpose of this clipping region is to define the portion of the document available for displaying the element and its contents. Anything outside that portion is clipped, or not displayed, by the document.

The clipping region can be viewed in terms of an opaque piece of paper that covers the physical area of the absolutely positioned element. In this piece of paper is a rectangular hole that defines the visible area of the element. Everything not visible through the hole in the paper is clipped and becomes invisible.

Figure 12-4 illustrates how clipping regions work. The left side of the figure shows a page with no clipping performed. The larger rectangle is a DIV element. The smaller rectangle is contained in the DIV element but absolutely positioned outside the DIV element's borders. The right side of the figure shows the same page with clipping performed.

The default value of the clip property is auto, which causes the contents not to be clipped. You can set the clip property value to be a rectangle:

clip:rect(top right bottom left)

The top, right, bottom, and left settings define the clipping rectangle with respect to the absolutely positioned element's upper left corner. Each of the four settings can be specified with any valid CSS length or can be set to auto to prevent clipping in that direction. If the top and left settings are negative, elements above and to the left of the absolutely positioned element can be included within the clipping region.

CSS Positioning

Figure 12-4. A DIV element with part of its contents outside its borders, with no clipping (on the left) and with a clipping rectangle defined (on the right).

The overflow Property

The overflow property controls how any contents that extend beyond the physical size of the element are handled. The overflow property takes one of four values: visible, hidden, auto, and scroll. With overflow set to visible, all contents are displayed, even contents outside the specified height and width of the element. With overflow set to hidden, only the contents within the element's height and width are displayed; no contents flow beyond the specified boundaries.

The auto and scroll values are used for adding scrollbars if the contents are larger than the height and width of the element. Scrollbars can be added to any absolutely positioned element, to DIV elements with a defined height, and to any element that supports the CSS float property. The overflow value scroll always displays scrollbars, while the value auto displays them only when they are required.

The following document demonstrates how to create a scrolling sidebar:

<HTML>
   <HEAD>
      <TITLE>Scrolling Sidebar</TITLE>
   </HEAD>
   <BODY>
      <DIV STYLE="overflow:scroll; float:left;
            width:120pt; height:120pt">
         <H1>Scrolling Sidebar</H1>
         <P>This text appears in a scrolling window that is floating
            to the left of the main contents.</P>
      </DIV>
      <P>These contents appear to the right of the scrolling DIV
         element.
   </BODY>
</HTML>

Figure 12-5 shows this document.

CSS Positioning

Figure 12-5. A document with a scrolling sidebar.

When scrollbars are specified for an element, they automatically extend to include absolutely positioned child elements. This extension ensures that the user can reach all child elements that are absolutely positioned. You can create forms and complex layouts that are fully accessible. The exception to this feature is any element that is positioned negatively. Under no circumstances do the scrollbars extend into the negative coordinate space.

When scrollbars are displayed using the overflow property, clipping does not affect absolutely positioned child elements; the user can still scroll to them, and they will be visible. Instead, if the clipping region does not include the entire element with scrollbars, the element itself will be clipped. Figure 12-6 demonstrates this relationship. In the screenshot on the right, the absolutely positioned element is not visible because it is inside the DIV element with the scrollbars.

CSS Positioning

Figure 12-6. On the left, an element with a clipping region and without scrollbars; on the right, the same element with the same clipping region and with scrollbars.


NOTE: Relatively positioned elements have no effect on the scrollbar. Only the element's original space in the flow is used in the scrollbar calculation because the relatively positioned element's location in the document is technically its position in the flow and the offset is simply a manipulation of the rendering position. Furthermore, relatively positioned elements are most often used for animation. Including these elements in the scrollbar calculations would interfere with the animation effect. For example, you should be able to scroll text off the right edge of the screen; no scrollbar should appear that would allow the user to scroll the text back into view.

[Содержание]