Position

Keywords: static, absolute, relative, fixed,sticky

Auto Auto. Influenced by parent CSS and adaptive. Take up all available space

static

  • Top, bottom, left, right, z-index invalid normal layout (context default)

relative

  • First the element stays in its original default position and then adjusts its position without changing the original layout (top,right…..) , while preserving the original position,(so it may leave white space on the original style) is not valid for table-row table-group, etc

absolute

  • It is moved out of the normal document flow, offset with respect to the nearest non-static ancestor element (if not the body, then the original ICB), does not retain the original position, can set margins and does not merge with other positions

fixed

  • Move out of the normal document flow without preserving position. The viewport is fixed relative to the page. While scrolling, a new cascading context is created.
  • When the element ancestor’s transform, Perspective, or filter attribute is not None, the container changes its viewport to that ancestor.

sticky

  • Normal document flow, relative to the nearest scrollable ancestor or contain-block. The offset value does not affect the position of other elements.
  • Create a new cascading context attached to the nearest ancestor that has a scrolling mechanism. (overflow:hidden,auto,scroll,overlay). Even if the ancestor is not truly scrollable
  • Before the relative threshold is crossed, it is relative positioning, and after the threshold is crossed, it is absolute positioning

background

I think no content (….)

Cascading context

HTML is like a z-axis arrangement, and a cascading context is like a three-dimensional representation of HTML

  • Index is a comparison of the same level. Child elements are superimposed backwards like version numbers

The z-index of the child element is equivalent to the sibling element. The parent element is not affected

  • A cascading context can contain a cascading context, and together constitute a hierarchy
  • Independent of siblings, only children are considered
  • Each cascade context is self-contained: when the contents of an element are cascaded, the element as a whole is cascaded sequentially in the parent cascade context.
Root z-index = 2, z-index = 4, z-index = 1, so render order 4.1, z-index = 3, z-index = 4, So the render order is 4.3, z-index is 6, overlapping within a z-index of 4, so the render order is 4.6, z-index is 5Copy the code
CSS cascade
  • @keyframes do not participate in cascading, taking a unique animation at any time, rather than mixing multiple @Keyframes

CSS base box model

  • Each box has four boundaries: Content Edge, Padding Edge, Border Edge, and Margin Edge.
  • box-sizing:content-box; Standard box model
  • box-sizing:border-box; Weird box model
  • Width =width+ margin-right + margin-right; Total width in weird mode =width+margin

Margin folding

Margin-top and margin-bottom fold into a single margin, whose size is the maximum of a single margin, called margin folding

Float and position: Absolute do not cause folding behavior

  • Between the same adjacent elements
  • There is no content to separate the parent element from the descendant element
  • Empty block-level elements

Containing block

Block level formatting context float Positioning (float) Clear float (clear)

  • . A large number of rules create block formatting contexts
  • BFC is sometimes used to deal with floating issues

The solution

  • Overflow: Auto contains floating BFC. The overflow property tells the browser what to do with the overflow
  • Display: flow-root Creates a new BFC
  • All content participates in the BFC and floating content does not overflow from the bottom

Why is float

At first I didn’t understand the meaning of floats. I didn’t understand that many statements are used to clear floats. Just don’t write it down.

The usefulness of float

  • For example, the picture on the left, the text on the right.
  • If the picture is absolutely located. After resize the image. It might overwrite the text

Clear float

  • clear both left right none inherit

How do collapsing floats affect their parent elements

  • The parent element contains only floating elements, so its height collapses to zero

Clear float techniques

  • An empty div
  • overflow

Ellipsis four values on top, right, bottom and left three values. Left and right, the next two values up and down. Or so

Flexible box model flex grid layout

Why is the order of properties of animation different from what I wrote before MDN

Making address (F-one-1 (github.com))