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

This article mainly introduces "the use of CSS positioning". In the daily operation, I believe that many people have doubts about the use of CSS positioning. The editor consulted all kinds of data and sorted out simple and easy-to-use operation methods. I hope it will be helpful for you to answer the doubts about the use of CSS positioning. Next, please follow the editor to study!

The use of positioning consists of two parts:

The way of positioning

Offset value left,right,top,bottom offset value is accurately understood as "what is the distance from what position" such as the top:100px; distance from the top is 100 pixels (go down).

# static location

All standard streams are statically located.

Position:static

It is generally used to restore some located elements to a standard stream, but it is rarely used.

The offset value does not work for static positioning, and the element positioning we will talk about later does not include static positioning.

Title .box {width: 300px; height: 300px; background-color: red; position: static; left: 500px; top: 500px;}

# relative positioning

Relative positioning is relative to the position of one's own standard flow.

Position:relative

Properties:

1. The starting point of movement is the position of its own standard stream.

two。 Relative positioning moving elements will not interfere with other elements, "no off-standard", the real position is still the position of the standard flow (the body is not permanent in the soul)

3. Can be covered on top of the standard stream

4. It is generally used to fine-tune elements and cooperate with absolute positioning to achieve results.

# absolute positioning

Position:absolute

Properties:

1. The starting point of the movement:

Start from the absolute element and go to the superior (until the largest html tag is found). In this process, as long as one element (element A) is positioned (relative, absolute, fixed), the absolutely positioned element will be positioned with reference to the An element and will not be looked up. If there is no one, it will eventually be positioned as a html element.

two。 Off-standard

1.1. Out-of-standard elements do not occupy the position of the standard flow

1.2. The width of the parent will not be inherited, and the content will be as large as it is (regardless of block level or in-line).

1.3. You can write width and height directly (regardless of block level or inline)

1.4. Margin:auto has no effect on de-standardized elements

Ingenious use: center a positioning box horizontally and vertically

Mode of use:

In work, absolute positioning "mostly" is used together with relative positioning (father and son are unique)

Parent phase: occupies a place on the standard stream

Zijie: moving in response to this standard stream

Note: there are also cases in which the father and the son are absolute, but rarely, do not completely form a mindset.

# fixed location

Properties:

1. Off-standard

1.1. Out-of-standard elements do not occupy the position of the standard flow

1.2. The width of the parent will not be inherited, and the content will be as large as it is (regardless of block level or in-line).

1.3. You can write width and height directly (regardless of block level or inline)

1.4.margin:auto has no effect on de-standardized elements

two。 Starting point of movement: browser window (direct expression: scroll bars have no effect on fixed elements)

Summary of four kinds of positioning

Whether the positioning mode is out of standard to occupy the position can use edge offset mobile position reference static static not off-standard normal mode can not normal mode relative positioning relative non-off-mark occupying position can move relative to its own position absolute positioning absolute completely detached, non-occupied position can be fixed relative to the positioning parent mobile position fixed completely detached, non-occupied position can be moved relative to the browser position

# z-index

Controls the stacking level of positioning elements

Z-index is effective only for positioning elements

The higher the z-index value, the higher the hierarchy.

If the parent element has already compared the hierarchy (when the parent element has "all" z-index and the value is not auto), then the child element will not be compared with the child element.

At this point, the study on "the use of CSS positioning" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

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.