"CSS positioning position" course notes

This is the note I made when I studied the course CSS positioning position!

The content of this section

• Three ways to lay out HTML
• Position Optional Parameters
• Z-index
• The difference between a box model and a positioning
• Side bar Navigation Follow instance

Three ways to lay out HTML

Three layouts: standard flow, floating, positioning

Two main elements: block-level Element (div,h1-6,table,ol,ul,li,p), inline element (a,span,img,input)

Position Optional Parameters

Static (normal arrangement in standard flow)

Relative (relative positioning)

Absolute (absolute positioning)

Fixed (out of normal document flow, login popup, inline ad, not subject to parent element)

Inherit (inherits the position property of the parent element)

Z-index

Z-index large elements will overwrite z-index small elements

Z-index elements for Auto do not participate in hierarchical comparisons

Z-index are negative and will be overwritten by levels in the normal stream

Only works on position for positional properties other than static

The benefits of the parent element hierarchy

The difference between a box model and a positioning

The box model is moved by internal and external margins, and positioning is moved by position.

The location instance of the login interface of MU class net (with mask)

Side bar Navigation Follow instance

First level column with Div, two level column with UL and Li, three level column with Div

Three level column with absolute positioning on the right to expand

Level two or three column starts with display：none , then useshover:display:block

"CSS positioning position" course notes