What are the functions of display?
None: The element is hidden and does not occupy position
Block: This element is displayed as a block-level element
Inline: By default, the element is displayed as an inline element
Inline-block: inline block element
List-item: This element is displayed as a list
Run-in: This element is displayed as a block-level or inline element, depending on context
Table: This element is displayed as a block-level table
Inline-table: This element is displayed as an inlined table
Table-row: This element is displayed as a table row
Table -row-group, table-header-group, tabele-footer-group, table-column-group: This element is displayed as a group of one or more rows
Table-column: This element is displayed as a cell column
Table-cell: This element is displayed as a table cell
Table-caption: This element is displayed as a table title
Inherit: Inherits the value of the display attribute from the parent element
“Relative” and “absolute” are respectively relative to whom?
Position: Absolute Absolute position
Refer to the upper left corner of the browser and locate the location with top, right, bottom, and left. If these four attributes are not set, the original point of the parent is used by default. If the property is set and the parent does not set the position property, the original point is positioned at the top left corner of the browser. Jump out of the text stream, relative to the parent and with positioning, if the parent does not have positioning attributes, then look to the parent for positioning, if neither, then body positioning.
Position :relative
Refer to the original point of the parent as the original point; if there is no parent, the original point of the body is the original point. When the parent has CSS properties such as padding, the current original point is positioned according to the original point of the parent content area. Without breaking out of the text stream, positioning is relative to parent and sibling nodes,