Positioning properties: Position
Action: retrieve and set targeting element "(change element positions)
Positioning steps:
1. Add the elements to prove that the position property to position elements do change
2. Determine reference! (Determined by the position of the attribute values)
3. Determine the coordinates left right top bottom
Position attribute values:
1.static static position:
(1) Position of the default values, the default state of the text stream.
Left right top bottom does not recognize the specified coordinates.
(2) Absolute Absolute positioning:
① reference: changes the location of the parent element has been positioned.
(Example: blue pink div div sub-element to the parent element to the parent element to the child is then positioned to a reference element in the parent element is to change the location reference)
② if the current element has no parent or the parent element is not positioned as a reference case to the entire document (entire page)
(ibid parent element at this time is the whole page !!!)
③ absolute positioning will flow out of the document, does not occupy space
Example:
In this case the sub-elements (blue div) in the default position i.e. the upper left corner of the parent element (pink div) of
Div is now added to the pink position: absolute; reference is formed
to give a blue div add position: absolute;
right: 0; bottom: 0;
i.e., so that the sub-elements from the bottom position 0px 0px distance from the parent element to the right (right lower corner)
After adding targeting
this time
the blue div went to the bottom right corner of the parent element.
实现代码如下：
.box1{
width: 800px;
height: 500px;
background: pink;
margin: 100px auto;
position: absolute;
}
.demo{
height: 200px;
width: 200px;
background: skyblue;
position: absolute;
right: 0;
bottom: 0;
}
2.relative relative positioning:
参照物：自身默认的位置！！！
Always take up space, does not destroy the document flow
Example:
Div blue to add targeting properties: position: relative; (i.e., formed in itself, and reference)
Pre-positioning:
After positioning:
position: relative;
plus a left: 20px; top: 20px; (div div distance from the left position of the initial 20px designated bit, the distance from the top 20px)
NOTE: At this point reference is moved with respect to its own position is the position of itself, before! ! !
实现代码：
.box1{
width: 800px;
height: 500px;
background: pink;
margin: 100px auto;
position: relative;
}
.demo{
height: 200px;
width: 200px;
background: skyblue;
position: absolute;
left:20px ;
top: 20px;
}
Setting block comprising:
1. If the parent element as a reference: add position: relative;
2. to locate the child elements do add position: absolute;
Positioning order problem:
Pre-positioning of the positioning element will cover elements!
z-index:
the control hierarchy of the positioning element
Property value is a number (may be plural), the larger the number the higher hierarchy.
(The greater the weight, the greater is similar to digital !!!)
