I have been learning CSS over the past few days. Since I had less contact with CSS in the past, it would be easy to use, so it is a little difficult to learn. Especially in terms of layout, although there are many examples on the internet, but now I have no system knowledge about the layout.
The layout is implemented by the position attribute. It has the following values:
Static |
Default value. No special positioning, the object followsHtmlLocating rules |
Absolute |
Drag an object from the document stream and useLeft,Right,Top,BottomAnd other attributesRelative to the parent object closest to the parent object with the most positioning settings, perform absolute positioning.. If such a parent object does not existBodyObject. And its cascade throughZ-IndexAttribute Definition |
Fixed |
Not supported. Object positioning follows absolute(Absolute)Method. But comply with some rules |
Relative |
Objects cannot be stacked, but will be based onLeft,Right,Top,BottomOffset position of other attributes in normal document streams |
Note:
How to locate the retrieved object.
Set this property value Absolute It will drag the object out of a normal Document Stream and definitely locate it without considering the layout of its surrounding content. . If others have different Z-Index Attribute objects occupy a given position. They do not affect each other, but are stacked at the same position. At this time, the object does not have external Patches (Margin) But there are still internal Patches (Padding) And border (Border) .
Absolute Value of the object to be activated (Absolute) Location, which must be specified Left , Right , Top , Bottom At least one of the attributes, and set this attribute value Absolute . Otherwise, the above attributes will use their default values. Auto , Which causes the object to follow the normalHtml Layout rules, which are presented immediately after the previous object.
Set this property value Relative Will keep the object in the normal Html Streaming, However, its position can be offset based on its previous object. . In relative (Relative) The text or object after the positioning object occupies their own space and does not overwrite the natural space of the positioning object. In contrast (Absolute) The text or object after the positioning object occupies its natural space before it is dragged away from the normal Document Stream. Absolute placement (Absolute) When the positioning object is outside the visible area, the scroll bar appears. And placement relative (Relative) The position object is outside the visible area, and the scroll bar does not appear.
The content size is determined based on the layout. For example Div Object Height AndPosition Attribute, then Div The content of the object determines its width. (Width) .
This property Currentstyle The object is read-only. Other objects can be read and written.
Corresponding script features: Position .