Position
- The positioning method of the element, value staic, fixed, relative, absolute
- Static: Statically positioned (default state.) Not positioned)
- Fixed: Stationary positioning
- Relative: Relative positioning
- Absolute: Absolute Positioning
Positioning mode to use with positional properties
- Positional coordinates: Specifies the element of the positioning, the distance of the target element
- Left: Position the element, distance from the distance of the target element
- Top: Positioning elements, distance from the top of the target element
- Right: Position the element, distance from the left of the target element
- Bottom: position element, distance from bottom of target element
1, fixed positioning, position:fixed
- fixed positioning, is relative browser window the position to be performed.
- Fixed positioning, does not occupy space, the hierarchy is higher than the ordinary element, it does not scroll with the page scrolling
- If you do not specify positioning coordinates, the position of the fixed positioning element is not moving .
- Fixed positioning element, must be "block element", no matter what the original element.
- Usually is the website fixed advertisement location
2, relative positioning, position:relative;
- Relative positioning is relative to "original self" to locate
- Relative positioning, still occupy space , the level is higher than ordinary elements
- If you do not specify positioning coordinates, the position of the relative anchor element is not moved
- Relative positioning, the original is the element in the row, after positioning or inline elements, the original is a fast element, positioning or block elements.
Relative positioning and absolute positioning are generally used in conjunction with each other.
3, absolute positioning, Position:absolute
- relative to ancestor positioning element < Span style= "COLOR: #ff0000" > (relative positioning, absolute positioning) for positioning.
- If his parent element does not have any positioning, then look up the positioning element.
- If you have not found the anchor element for <body>, then position the relative to <body>.
- Absolutely positioned elements, not occupying space , are more hierarchical than ordinary elements.
- An absolutely positioned element is a "block element."
When using their own must pay attention to the absolute positioning and relative positioning with the use, to the relative to the parent element of the absolute positioning, the parent element of the positioning of the relative positioning.
CSS positioning position
