1, the static (default)
When you don't specify positioning for an element (such as div) mode, the default is static, which is in accordance with the document flow (flow), the element into a suitable place, so under the different resolution, using current location can be a very good since the fit, obtain relatively good effect on layout,

Generally speaking, we don't need to indicate the location of the current element is static, because this is the default location, unless you want to override inherited from the parent element of the positioning system,



2, the relative (relative positioning)
On the basis of the static, if I want to make one of the elements in his original position to do some adjustments (displacement), we can set the element orientation to relative, at the same time specified relative displacement (the use of top, bottom, left, right),

It should be noted that the relative positioning of the elements in the document flow, still still occupies the he had occupied the position of the space - even though he is now is not in the original position,



3, the absolute (absolute positioning)
If you want to be in one Document (the Document) will be returned to the one element at a specified location, you can use absolute positioning, set the position of the element to absolute, at the same time use top, bottom, left and right to locate,

Absolute positioning can make the element to be deleted from the document flow, as a result, the element originally occupied space was filled by other elements,



4, mix relative and absolute (mixed relative orientation and absolute orientation)
If a parent element set relative, and absolute is set to its one child, such as:

1
2
3
4

Subelements absolute positioning of the reference to the parent element,



Using hybrid positioning, we can use a similar the CSS below Two columns (Two Column) locate

1
2
3
4
5
6
7
8
9
10
11.
12
13
14
15
# div - parent {
position:relative;
}
# div - child - right {
position:absolute;
top:0;
right:0;
Width: 200 px;
}
# div - child - left {
position:absolute;
top:0;
left:0;
Width: 200 px;
}


5, fixed (fixed)
We know "absolute positioning of the reference is in a position of the parent element (static)", so if I want to make an element positioning reference is always the entire document (viewport), how to do?

The answer is to use a fixed location, fixed position reference is always the current document, the use of fixed position, it is easy to make a div positioning in the upper left corner of the browser document, upper right, such as bearing, for instance you want to add a message div, and to fix the div in the top right, you can use the following CSS

1
Element. {position: fixed; Top: 2%; Right: 2%; }


6, float (floating)
For floating, need to know is:

* the floating element will be deleted from the document flow, will be other elements make up his space,

* a floating parameter is the parent element, is the parent element in the container,

* in order to remove the floating to the elements after the floating element influence, caused by the us after the floating element to add a div, and set the div clear to both,

* if two elements are set up float, the two elements are not overlap, the first element to occupy a certain space, followed by the second element, if you don't want to let the second element is followed, can use the clear to the second floating element,

CodePudding user response:

Good is very helpful

CodePudding user response:

Worth a look to help students learn electricity thanks for sharing

CodePudding user response:

Good, very good

CodePudding user response:

This is good, looking forward to your update

CodePudding user response:

Thanks for sharing!
The basic knowledge of notes type, suggest to personal blog

CodePudding user response:

reference 5 floor gypsy song reply:

thanks for sharing!
Note type basic knowledge, suggest to personal blog

Ok, I'll adopt. Thank you

CodePudding user response:

Very useful, for yourself and other people is also very useful

CodePudding user response:

refer to 7th floor YYhoney99 response:

is very useful, is very useful to oneself and other people also

Yes. I hope I can help you

CodePudding user response:

refer to 7th floor YYhoney99 response:

is very useful, is very useful to oneself and other people also

Yes. I hope I can help you

CodePudding user response:

I hope I can help you, thank you

CodePudding user response:

Good oh, brings us a great help

CodePudding user response:

Content is very good, very worth a look

CodePudding user response:

Worth a look to help students learn electricity thanks for sharing