Dreamweaver MX CSS Usage tutorial CSS positioning properties

css|dreamweaver| Tutorial

Site original content, reproduced please indicate the source Web page teaching network .

　　 eight. Define CSS style positioning Properties

The positioning style property changes the label or selected text block to the new layer using the default label for the layer defined in the layer preferences.

Set layer positioning properties: In the CSS Style Definition dialog box, select Locate (the following figure), and then set the style properties that you want.

If you do not set the property, it can remain empty.

Type: Determines how the browser should locate the layer.

Absolute: Place the layer by using the coordinates entered in the position box (relative to the upper-left corner of the page).

Relative: Use the coordinates entered in the position box (relative to the position of the object in the document's text) to place the layer. This option is not displayed in the document window.

Static: Places the layer where it is in the text.

Display: Determines the initial display condition of a layer. If you do not specify a visibility property, most browsers inherit the parent's value by default. Select one of the following visibility options:

Inheritance: The visibility property of the inherited layer's parent. If the layer has no parent, it will be visible.

Visible: Displays the contents of the layer, regardless of the parent's value.

Hide: Hides the contents of these layers, regardless of the parent's value.

Z-axis: Determines the stacking order of layers. Higher-numbered layers appear above the lower-numbered layers. The value can be positive, or it can be negative. (Note: It is easier to change the stacking order of layers using the layers panel.) ）

Overflow (CSS layer only): Determines what happens when the content of the layer exceeds its size. These properties control how this extension is handled, as follows:

Visible: Increases the size of the layer so that all its contents are visible. The layer extends to the lower right.

Hide: Keep the layer size and clip any excess content. does not provide any scroll bars.

Scrolling: Adds a scroll bar to the layer, regardless of whether the content exceeds the layer's size. A specially provided scroll bar avoids the confusion caused by scrollbars appearing and disappearing in a dynamic environment. This option is not displayed in the document window and applies only to browsers that support scroll bars. Note: Internet Explorer and Netscape Navigator 6 support this property.

Auto: Makes the scroll bar appear only if the content of the layer is outside its bounds. This option is not displayed in the document window.

Positioning: Specifies the location and size of the layer. How the browser interprets the location depends on the type setting. If the content of the layer exceeds the specified size, the size value is overwritten.

The default units for position and size are pixels. For the CSS layer, you can also specify the following units: PC (12-point type), pt (Dots), in (inches), mm (mm), cm (cm), (EMS), (EXS), or% (percent of parent value). Abbreviations must be immediately after the value, with no spaces in the middle: for example, 3mm.

Clips: Defines the visible part of a layer. If you specify a clipping region, you can access it through a scripting language, such as JavaScript, and manipulate properties to create special effects such as erasing. You can set these erasure effects by using the change properties behavior.

When you are finished setting these options, select another CSS category on the left side of the panel to set additional style properties, or click OK.