Detailed CSS Position properties

The recent painting of rich-Swiss interface, a lot of elements of the positioning is a problem (before I do not know very much about the position property)

Later on the internet to find out about the position of some of the relevant properties and usage, so organized a bit

Position: Property: The anchor type of the fixed element. That is, the element is detached from the document's layout flow and is displayed anywhere in the element.

There are four types of attribute values for position:

1. Static: Default layout (default value)

2, fixed: fix positioning, as the name implies is fixed meaning, and absolute positioning similar, but more than absolute "set"! (Does not scroll with scroll bars)

3, relative: relative positioning, out of the layout flow of the document, but will leave a blank in the original location of the document

4, Absolute: absolute positioning, out of the document layout flow, in the document will not leave a location

The following is a brief answer to these several positioning methods:

First, static

This layout is the default layout, so let's not say, everyone is more familiar with

This means that the element is not positioned and that the document appears where it should appear

Second, fixed

Fixed positioning object is body-positioned object, in short, according to the entire window (page) to locate, through (t,r,b,l) to locate,

If your scroll is set to False, this positioning is very hanging! , many websites advertise this ghost

In fact, I feel that the Internet is very troublesome, in my understanding, fixed is to put this element nailed to the screen at this point, nothing else (simple rough)

Third, Absolute

Absolute positioning, which is a way of locating objects out of a normal document stream, is to float elements out of the entire document, and the physical space of the elements themselves

Naturally disappear, unlike relative, which has its original physical location.

If the parent (infinity) does not set the Position property, the current absolute is combined with the TRBL property to locate the original point in the upper-left corner of the browser

If the parent (infinity) Sets the Position property, the current absolute is combined with the TRBL property to locate the original point in the upper-left corner of the parent (most recent).

When set Position:relative is positioned with the upper-left corner of the content area of the parent (most recent) as the original point combined with the TRBL attribute (or offset from the previous element in the parent content area of the positioned element), no parent is the original point in the upper-left corner of the body. Relative positioning is not stacked. When using relative positioning, elements still occupy the original space regardless of whether the element is moving or not. Therefore, moving an element causes it to overwrite other boxes.

Generally speaking, the center effect of the words with absolute is prone to error, because the page has been automatically adapted to the size of the resolution,

The absolute will be the original point in the upper-left corner of the phone screen and will not change position for resolution. Sometimes it is necessary to rely on Z-index to set the container's upper and lower relations, the larger the number on the top,

The value range is the natural number. Of course, there is a point to note that the parent-child relationship is unable to use Z-index to set up the upper and lower relations, must be the child in the upper parent.

Text or an object after an absolute (absolute) anchored object occupies its natural space before the anchored object is dragged off the normal document stream.

Placing an absolute (absolute) anchored object outside the viewable area causes the scroll bar to appear. The scroll bar does not appear when you place a relative (relative) anchored object outside the viewable area.

Four, relative (feel I understand is not particularly thorough)

From an application perspective, relative is often used on container elements that contain absolute elements. The absolute element defaults to the body as the container element for absolute positioning.

If you want to make absolute positioning in a specific area of the page, you can apply the relative style to the absolute element by wrapping a layer of container elements outside.

The image point is that relative positioning is very selfish

Its greatest feature is that it runs away from the position and occupies the original location, not to the surrounding objects such as text flow.

Relative positioning is also relatively independent, do what it is the final decision, to locate the time, it is in its own position offset (relative to the object itself).

One of the most important things that relative needs to understand is its position relative to itself: that is to say

Relative is positioned relative to itself, for example: #demo {position:relative;top:-50px;}, at which point the #demo will move 50px relative to its original position.

Finally, a case of the combination of relative and absolute is described.

Let's start with a word:

Any ancestor element of an absolutely positioned element does not have any "relative" or "absolute" settings, so the reference to an absolutely positioned element is the HTML

In the emphasis point: relative is relative to its own location, absolute is relative to the parent element is positioned

Give me a chestnut (on the Internet, I feel the grey is always good)

(It's not good to put a picture here, but we can fill it up.)

As an example to illustrate the relationship between "relative" and "absolute", there are three div in the body in the first place,

And the relationship of their three div is "div-1>div-2>div-3", and in div-3 there is such an absolute positioning:

. div-3 {Position:absolute;                left:0;            top:0; }

Here are a few things to say:

1, Div-1 and Div-2 are not set "position:relative", at this time our div-3 absolutely positioned after the drift to the "div-3c" position;

2, now we add a "position:relative" in the Div-2 element, at this time our div-3 absolutely positioned after the drift to the "div-3a" position;

3, then the relative positioning of the settings for the Div-1 element, at this time Div-3 absolutely positioned after the position of the div-3b.

To spend so much thought, I just want to make it clear that if an element is absolutely positioned, its reference is relative to whether the closest element is set to its own position,

If there is a setting that will be positioned near its nearest element, the HTML will always be found if there is no relative positioning element for its ancestor element.

Detailed CSS Position properties