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

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

.

Positioning (position)

Background-position background location

If, when it comes to floating, the key lies in the word "floating", then the key to our positioning lies in a "bit".

PS: positioning is one of the most difficult of our CSS, but you must learn it well. We CSS can't do without positioning, especially the js special effects, which deal with positioning every day. Don't resist it, but fall in love with it. It can make our work easier.

Why use location?

So where is the location, where is the longest use scene? If you look at some pictures, you must have some feelings!

The small yellow block can be moved on the picture:

The left and right arrows hold down the picture:

Hot has an extra piece on the outside of the box, which is even more prominent:

The above three small places, if the standard stream or floating, the implementation will be more complex or difficult to achieve, at this time we use positioning to do.

Positioning attribute of the element

The positioning attribute of the element mainly includes two parts: positioning mode and edge offset.

1. Edge offset

The edge offset attribute describes the top top offset, defines the distance of the element from the upper edge of its parent element, the bottom offset of bottom, the left offset of the distance of the element from the lower edge of its parent element, the right right offset of the distance of the element from the left edge of its parent element, and the distance of the element from the right edge of its parent element.

That is to say, the future positioning should be used with this offset, such as top: 100px; left: 30px; and so on.

2. Positioning mode (classification of positioning)

In CSS, the position attribute is used to define the positioning pattern of an element, and its basic syntax format is as follows:

Selector {position: property value;}

Common values of the position property

Value describes static automatic positioning (default positioning method) relative relative positioning, positioning absolute absolute positioning relative to its original document stream, positioning fixed fixed positioning relative to its previous parent element, and positioning static positioning (static) relative to the browser window

Static positioning is the default positioning method for all elements. When the value of the position attribute is static, the element can be positioned in a static position. The so-called static location is the default location of each element in the HTML document stream.

The above words are translated into vernacular: all elements in the web page are static positioning by default. In fact, it is the characteristic of the standard flow.

In a static positioning state, you cannot change the position of an element by offsetting an attribute (top, bottom, left, or right).

In fact, nothing, the only use of static positioning: is to cancel the location. Position: static

Relative positioning relative (narcissistic)

Relative positioning is to position an element relative to its position in the standard stream, and when the value of the position attribute is relative, you can position the element in a relative (own) position.

After you set the relative positioning of the element, you can change the position of the element by the edge offset attribute, but its position in the document flow remains (retains the original position). As shown in the following figure, the effect of relative positioning is shown:

Note:

The most important point of relative positioning is that it can move the position through the edge offset, but the original position continues to occupy.

Secondly, the position of each move is based on its own upper left corner (relative to itself).

That is, the relatively positioned box is still in the standard stream, and the box behind it is still treated as a standard stream. (relative positioning is not off-standard)

If the main purpose of floating is to display multiple block-level elements in a row, then the main value of positioning is to move the location so that the box is where we want it to be.

Absolute positioning absolute (Pupa type)

[note] if the document is scrollable, the absolute positioning element scrolls with it, because the element will eventually be positioned relative to some part of the normal flow.

When the value of the position attribute is absolute, you can set the positioning mode of the element to absolute positioning.

Note: the most important thing about absolute positioning is that it can move the position by edge offset, but it is completely off-standard and does not occupy the position at all.

Absolute positioning absolute can be divided into three situations:

1. The parent has no location.

If all parent elements are not positioned, align to the browser's current screen (document document).

two。 Parent has location

Absolute positioning is the positioning of an element based on the parent element (ancestor) that has been positioned closest (absolute, fixed, or relative positioning).

3. The son and the father are in love with each other.

This sentence means that if the child is absolute positioning, the parent should use relative positioning.

First of all, we say that absolute positioning is the positioning of elements based on the nearest parent element (ancestor) that has been positioned absolutely, fixed, or relative.

That is to say, the child is absolute positioning, as long as the father is positioning (whether the father is absolute positioning or relative positioning, or even fixed positioning), that is to say, the son absolute father, the son absolute father phase is correct. However, the relative position is highly recommended.

However, when we are in the layout of our web page, where does the most common idea of the son and the absolute father come from? Please look at the following picture:

Therefore, we can draw the following conclusions:

Because the child is absolutely positioned, it will not occupy the position and can be placed anywhere in the parent box.

When the parent box is laid out, it needs to occupy the position, so the father can only be relatively positioned.

This is the origin of the son and the father.

Absolutely positioned box centered horizontally / vertically

An ordinary box can be changed from margin to auto, but it is invalid for absolute positioning.

The positioning box can also be centered horizontally or vertically, and there is an algorithm.

First of all, left 50% of the size of the parent box

Then take the minus half of the outer margin of yourself, margin-left.

Code example Document p {width: 200px; height: 200px; background-color: pink; / * margin: 100px auto;*/ / * float: left;*/ position: absolute / * the box with positioning float margin 0 auto fails * / left: 50%; margin-left:-100px; top: 50%; margin-top:-100px;}

Fixed positioning fixed (recognition of death)

Fixed positioning is a special form of absolute positioning, similar to a square is a special rectangle. It uses the browser window as a reference to define web page elements. When the value of the position attribute is fixed, the positioning mode of the element can be set to fixed positioning.

When an element is fixed, it will break away from the control of the standard document flow and always define its display position according to the browser window. No matter how the browser scroll bar scrolls or how the size of the browser window changes, the element is always displayed in the fixed position of the browser window.

Fixed positioning has two points:

The fixed positioning element has nothing to do with the father, only the browser.

The fixed positioning is completely off-standard, does not occupy the position, and does not scroll with the scroll bar.

Lower versions of browsers such as ie6 do not support fixed positioning.

Stacking order (z-index)

When positioning is set on multiple elements at the same time, there may be overlap between positioning elements.

In CSS, to adjust the stacking order of overlapping positioning elements, you can apply the z-index cascading level attribute to the positioning elements, which can be positive integers, negative integers, and 0.

For example: z-index: 2; font-weight: 700

Note:

The default attribute value for z-index is 0, and the higher the value, the higher the positioning element is in the cascading element.

If the values are the same, the latter will catch up according to the writing order.

The following numbers must not be added by units.

Only relative positioning, absolute positioning, fixed positioning have this attribute, the rest of the standard stream, floating, static positioning do not have this attribute, and can not specify this attribute.

Four positioning summary positioning mode whether the location is out of standard, whether the position can be removed by using the edge offset mobile position reference static static, the normal mode can not be in the normal mode, the relative positioning relative is detached, the occupied position can be moved relative to its own position (narcissistic), the absolute positioning absolute is completely detached, and the non-occupied position can be completely de-calibrated relative to the positioning parent mobile position (daddy type) fixed positioning fixed Do not occupy the position can be relative to the browser mobile position (epistemic) positioning mode conversion

Like floats, after absolute and fixed positioning are added to an element, the element mode is converted to inline block mode.

The width and height of the inline block are related to the content.

* * for example, if an in-line element is floated after absolute positioning or fixed positioning, you can give the height and width directly without changing the mode. **

Shunfeng case

Document * {margin: 0; padding: 0;} .sf {width: 1259px; height: 472px; margin: 100px auto Position: relative;} .nav {width: 960px; height: 80px; background-color: # 000; position: absolute; bottom: 0 Left: 50%; margin-left:-480px;} .nav li {list-style-type: none; width: 160px; height: 80px; float: left } .nav li a {width: 160px; height: 80px; display: block; text-align: center; line-height: 80px; color: # fff Text-decoration: none;} .nav li a:hover {color: # 000; background-color: # fff;}

Express query

At this point, the study on "css locates how to use the position attribute" 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.