CSS base (6)

1. Why learn positioning

1. In order to solve page special page effect

2. In order to be able to be mobile and flexible elements in the page

 

2. Locate the property

It consists of two parts:

Positioning modes: static relative absolute fixed

Offset: top right bottom left

 

3. Static positioning

.box {
  position: static;
}

 

Features:

1. All labels are static positioning, positioning the equivalent of no

2. static positioning elements, the position of the standard stream occupies

3. The edge shift can not be used to change the current position of the element

4. That turned out how to or how, position the set like I did not write.

 

4. The relative positioning of the

.box {
  position: relative;
  left: 50px;
  top: 60px;
}

 

1. The relative positioning of the elements, required attributes set position: realative; further provided a side shift left / top

2. The relative positioning of the elements without departing from the standard position of the stream, continues to occupy the original position is not marked off

3 can be moved by the offset position

4 is carried out according to its original moving position

The relative positioning, a simple self-moving position, with not much. General absolute positioning element for defining a range.

 

5. absolute positioning absolute

.box {
  position: absolute;
  top:100px;
  left: 100px;
}

 

1. Absolute positioning elements need to set the attribute position: absolute; if you need to move again to set the offset left top side

2. absolutely positioned elements can be moved locations

3. Absolute positioning element from the standard flow, does not occupy the original position off the mark

4. Elements Element absolute positioning standard flow if there is an overlap position, it will cover element standard stream

5. When the page there is an absolute positioning elements, if side shift is provided the left, top, then, the reference position of the upper left corner of the page

6. When the child has a parent element, child element is absolutely positioned, but not positioned parent element when the current sub-elements or in the page as a reference point

7. When the child has a parent element, the child element is absolute positioning, the parent element is positioned opposite, when the current child element is the parent element of the mobile reference point

8. When the element has nested when a child element is absolute positioning, the reference point is the nearest from itself having non-stationary (static) positioning a parent box by reference.

9. absolute positioning elements will change the original display mode (inline elements, will become the inner row of blocks; block elements within block element will become row)

10. The absolute positioning of elements from the standard flow, so then the margin: auto invalid, absolutely positioned elements is the margin for the border boundary box

 

6. The fixed positioning fixed

.box {
  position: fixed;
  top: 10%;
  left: 100px;
}

 

Features:

1. fixedly positioned from the standard flow, the flow does not occupy the standard position

2. The fixed positioning may be offset by moving the position of the edges

3. The display element can be changed (the line element can be turned into block elements within the row)

4. The reference point is the visible region of the browser page

 

7. The stacking order of the positioning element z-index (level)

1. When the positioning element positions are coincident, there will be a default stacking order

2. The default back cover elements will suppress or previous element

3. As long as the positioning element (not including positioning static) equivalent to the concept of hierarchy has a default, default level is 0, with the z-index

4. If you want element is pressed, displayed at the top, it is necessary to set the element is pressed a property z-index: This value is the maximum for most, will appear in the top.

5.z-index value should not be set negative, there will be uncontrollable phenomenon.