Shulou(Shulou.com)06/01 Report--

1. Position (the location of the retrieved object)

1. Syntax position: static / relative / absolute / fixed / center / page / sticky

Static: objects follow a regular flow. The 4 positioning offset attributes will not be applied at this time.

Relative: when an object follows a regular flow and is offset by the four positioning offset attributes of top,right,bottom,left, referring to its position in the regular flow, it does not affect any element in the regular flow.

Absolute: the object deviates from the regular flow, where the offset attribute references the nearest positioning ancestor element, and if there is no positioning ancestor element, it goes all the way back to the body element. The offset position of the box does not affect any element in the regular flow, and its margin does not collapse with any other margin.

Fixed: consistent with absolute, but the offset positioning is based on the window. When a scroll bar appears, the object does not scroll with it.

Center: consistent with absolute, but the offset location is based on locating the center point of the ancestral element. The box is centered vertically and horizontally in the container it contains. (CSS3)

Page: consistent with absolute. The element is within the paging media or area block, and the inclusion block of the element is always the initial inclusion block, otherwise it depends on each absolute mode. (CSS3)

Sticky: the object follows the regular flow when it is normal. It is like a combination of relative and fixed, typesetting according to the regular stream when on the screen, and behaving like fixed when scrolling outside the screen. The performance of this attribute is the adsorption effect you see in reality. (CSS3)

two。 Description

Retrieves how the object is positioned.

When the value of position is non-static, its cascading level is defined by the z-index attribute.

An element that is absolutely positioned, when the top,right,bottom,left attribute is not set, immediately follows the sibling element before it, but does not affect any element in the regular flow in position.

The corresponding script feature is position.

3. Give an example

Position_CSS reference Manual _ web Front-end Development reference Manual

# position {

Position: absolute

Top: 50%

Left: 50%

Width: 150px

Height: 40px

Margin:-20px 0 0-75px

Padding: 0 10px

Background: # eee

Line-height: 2.4

}

Objects centered horizontally and vertically

2. Z-index (retrieve or set the cascading order of objects)

1. Syntax z-index:auto/integer

two。 Take a value

Auto: the cascading level of the element in the current cascading context is 0. Element does not create a new local cascading context unless it is the root element.

Integer: use integer values to define the stacking level. Can be negative.

3. Description

Retrieves or sets the cascading order of objects.

Z-index is used to determine the cascading level of an element in the current cascading context and whether the element creates a new local cascading context.

The cascading order of each element is determined by the cascading context to which it belongs and the cascading level of the element itself (each element belongs to only one cascading context).

In the same cascading context, the cascading level is displayed above, and vice versa.

In the same cascading context, two elements with the same cascading level will be written later will overwrite the first according to their order in the HTML document stream.

In different cascading contexts, the display order of elements is determined by the cascading level of the ancestors, regardless of their own cascading level.

When z-index is not defined or the value is auto, a new local cascading context is created under IE6,7, while in advanced browsers, no new local cascading context is generated according to the specification, as shown in the following example:

3. Give an example

Z-index_CSS reference manual _ web front-end development reference manual series

.z1

.z2

.z3 {

Position: absolute

Width: 200px

Height: 100px

Padding: 5px 10px

Color: # fff

Text-align: right

}

.z1 {

Z-index: 1

Background: # 000

}

.z2 {

Z-index: 2

Top: 30px

Left: 30px

Background: # C00

}

.z3 {

Z-index: 3

Top: 60px

Left: 60px

Background: # 999

}

Z-index:1

Z-index:2

Z-index:3

III. Top

IV. Right

5. Bottom

VI. Left

7. Clip

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.