s1/using HTML language and CSS to develop commercial sites/08-Locate page elements

There are 3 basic positioning mechanisms in CSS, namely standard flow, floating and absolute positioning. Typically, in a Web page, all elements are positioned in the standard flow unless specifically specified for the positioning of an element, meaning that the position of the element in the standard flow is determined by the position in the xhml .

In the previous chapters you have learned about standard and floating, and you can use floating to locate page elements. But just using a floating one way, you can't finish many of the more complex page effects on your page.

Position Property

The Position property , like the Yufloat property, is a very important concept in CSS typography. Position literally means the position of the specified box, referring to its position relative to the parent and the position relative to itself. The position property has 4 attribute values, which represent different positioning types for each of the 4 values.

Static: Default value, no positioning, elements are laid out according to standard flow.

Relative: Relative positioning, the use of relative positioning of the box is often based on the layout of the standard flow, and then the box relative to it in the original standard position offset the specified distance, the relative positioning of the box is still in the standard flow, the box behind him still treated it as a standard flow.

Absolute: Absolute positioning, the position of the box is offset by the box that contains it. The absolutely positioned box is detached from the standard flow. This means that they have no effect on the positioning of the other boxes behind them, as if the box does not exist.

FIX: Fixed positioning, which is similar to absolute positioning, only the browser window as the benchmark for positioning, that is, when dragging the browser window scroll bar, still keep the object position unchanged.

Fixed property values are not currently supported in some browsers and are not often used in real-world web pages, so this is not covered in detail here.

Static

Static is the default, and he says the box remains in the position it was supposed to be, without any moving effect. As a result, the examples explained in the previous chapters are actually static methods.

Relative

Use the relative property value to set the relative positioning of the element, in addition to setting the position property to relative, you need to specify a certain offset, horizontally using the left or the right property specifies that the vertical direction is specified using the top or bottom property.

It's used here.TopAndLeftTwoCssproperty, which has been mentioned earlier in theCssIn a common4A property matepositiontopleftright4positionabsoluterelativefixedpositiontopright Bottomleft this 4 Properties can be set to a percentage, in addition to the pixel value.

The law of relative positioning elements:

1, set the relative positioning of the box will be relative to his original position, by specifying the offset, to reach the new position.

2, set the relative positioning of the box is still in the standard flow, he has no effect on the parent box and the adjacent box.

Conclusion: the page element that sets the position property, whether in the standard stream or floating, does not have any effect on his parent and neighboring elements, it is offset only for its original position.

Absolute(absolute positioning)

1. The element with absolute positioning is offset by its nearest " already positioned" ancestor element. If there are no ancestor elements that have been positioned, the browser window will be the base for positioning.

2. Absolutely positioned elements are detached from the standard document stream, which means that they do not affect the positioning of other elements.

With respect to the first conclusion, there are two quoted attributes which require some explanation.

" already positioned " element: The Position property is set and is set to any method other than static, the element is defined as " already positioned " The element.

" ancestor " element: It is from any node of the document flow, go to the root node, all the nodes passed is his ancestor, where the direct ancestor node is its parent node, and so on.

Conclusion: If absolute positioning is set and no offset is set, then he will remain in its original position. This property can be used in Web pages where it is necessary to leave an element out of the standard stream and still want it to remain in its original position.

Z-index Property

In CSS , thez-index property is used to adjust the upper and lower positions of overlapping layers when the element is positioned.

The Z-index property represents the Z-axis perpendicular to the page orientation in the stereoscopic space . The value of the Z-index property is an integer, can be a positive number, or it can be negative. When the element is set to the position property, theZ-index property can set the overlap between the elements. the default value of the Z-index property is 0, and a layer with a large Z-index value is above the layer whose value is small, and when the Z-index value of the two layers is the same, the original high and low coverage relationship is maintained.

Set the transparency of a layer

Property	Description /p>	Example
opacity:x	x 0~1	opacity:0.4;
filter:alpha (opacity=x)	x0~100	Filter:alpha (opacity:40);

ie9chromeopera and safari using properties opacity ie8.0filter:alpha (opacity=x) css

As a result, the elements in the Web page contain two stacking levels, one is the environment in which absolute positioning is not set, and the Z-index attribute value of all layers is always 0, as in the picture layer on the page, below the text layer, and the other is the stacking environment where absolute positioning is set. , the location of the environment is specified by the Z-index property, like a transparent layer in the page and the text layer above it, with a layer with a large z-index value covering a small layer. If you need to set an absolutely positioned layer below the layer where absolute positioning is not set, you only need to set the Z-index value of the property of the absolutely positioned layer to be negative.

s1/using HTML language and CSS to develop commercial sites/08-Locate page elements