Static: No special settings, follow the basic positioning rules, can not be graded by Z-index hierarchy.
Fixed fixed position the reference object here is a visual window, not a body or parent element. Hierarchical grading can be done through Z-index.
CSS2.0 Handbook on the explanation:
Set this property value toAbsolute will drag the object out of the normal document flow to absolute position without regard to the layout of the content around it。 If other objects with different Z-index properties already occupy a given position, they will not interact with each other and will cascade at the same location. The object does not have margin (margin), but it still has padding (padding) and border (border).
To activate the absolute (absolute) positioning of an object, you must specify at least one of the left, right, top, bottom properties, and set this property value to absolute. Otherwise, the above properties will use their default auto, which will cause the object to follow normal HTML layout rules and be presented immediately after the previous object.
properties (top, right, bottom, left abbreviation TRBL) are only valid if the Position property is set.
when setting Position:absolute
If the parent (infinity) does not have the position attribute set, then the current absolute is combined
TRBLproperty is positioned as the original point in the upper-left corner of the browser
If the parent (infinity) Sets the Position property, then the current absolute is combined
TRBLproperty is positioned as the original point in the upper-left corner of the parent (most recent).
when setting position:relative
Refers to the parent (most recent)Content AreaThe upper left corner is a combination of the original point
TRBLproperty is positioned (or offset from the previous element in the parent content area relative to 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 of the page with absolute is prone to error, because the Web page has been automatically adapted to the size of the resolution, and absolute will be the browser's upper left corner as the original point, not to change the resolution of the location. Sometimes it is necessary to rely on the z-index to set the container's upper and lower relations, the larger the value is 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.
Setting this property value to relative keeps the object in a normal HTML stream, but its position can be offset by its previous object. Text or objects after the relative (relative) anchor object occupy their own space without overwriting the natural space of the object being anchored. Unlike this, 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. In fact, the main problem for positioning is to remember the meaning of each location. Relative positioning is relative to the initial position of the element in the document flow, and absolute positioning is the closest positioned ancestor element relative to.
summarized as follows:
Let's look at this one layer structure
<!DOCTYPE HTML><HTML><Head> <MetaCharSet= "UTF-8"> <title></title></Head><Body> <DivID= "Posi"> <DivID= "rel" >This layer applies only the position:relative style</Div> <DivID= "ABS"style= "Position:absolute;">This layer applies only the Position:absolute style</Div> <DivID= "SSS">Do not apply Styles</Div> </Div></Body></HTML>
1, Absolute: non-occupying, relative: there is a placeholder!
such as the upper structure:
A layer with a rel ID will occupy one line when it is displayed! The ABS layer behind it will only show up on the next line!
The layer with the ID ABS is displayed with an overlay with the following ID, SSS!
2, by default (not combined with top etc to locate), absolute (absolute positioning) to the parent layer to locate
If the above ID is ABS layer, if not combined with top and so on to locate, then its display position will be with the parent posi layer (posi in the lower left corner of the document, it will also be in the lower left corner)
3, in the combination of top, bottom, right, left and other attributes, absolute (absolute positioning) to the window as the location, relative with its own placeholder for the baseline to do the offset! As follows:
<!DOCTYPE HTML><HTML><Head> <MetaCharSet= "UTF-8"> <title></title></Head><Body> <DivID= "Posi"> <DivID= "SSS">Do not apply Styles</Div> <DivID= "rel">This layer applies only position:relative;bottom:30px;</Div> <DivID= "ABS">This layer applies only position:absolute;bottom:30px;</Div> </Div></Body></HTML>
The above code:
Layers with the ID rel are moved up and overlap with the layer with the ID of SSS
The layer with the ABS ID will be moved to the window at 30 pixels from the base.
4, in the combination of top, bottom, right, left and other attributes, if you want to absolute (absolute positioning) can be the parent layer as the positioning baseline, then apply the absolute or relativ property on the parent layer can be! as follows:
<body>
<div id=posi style= "Position:relative" >
<div id=rel> this layer applies position:relative;bottom:30px; style </div>
<div id=abs> This layer applies only position:absolute;bottom:30px; style </div>
</div>
</body>
The above code: The ID is posi layer, can also use the Absolute property!
The layer with the ID rel is unaffected and offsets the baseline with its own placeholder!
ID for the ABS layer is the ID of the posi layer of the bottom as a baseline, if at this time the height of posi layer is less than 30px, ABS layer may not be able to see Oh!
CSS Position:relative | Absolute | static | Fixed explanation
