1.【position

Specifies the type of positioning method applied to the element.

Specifies the types of positioning methods (static, relative, Fixed, Absolute, or sticky) applied to elements.

Elements are actually positioned using the top, bottom, left, and right attributes. However, these properties will have no effect unless the Position property is set first. They work differently depending on the position value.

Document flow: By default, browsers arrange elements from top to bottom (block elements) and from left to right (row elements and inline block elements) in what we call a streaming layout

The purpose of positioning is to allow us to move elements around

Static Static location

HTML elements are positioned static by default.

Statically positioned elements are not affected by the top, bottom, left, and right attributes.

position: static; Elements are not positioned in any particular way; It is always positioned according to the normal flow of the page

The default positioning mode static positioning is arranged according to the document flow requirements

Static Static positioning, the default positioning method of an element

The default value of the HTML element, that is, no location, follows the normal document flow object.

Statically positioned elements are not affected by top, bottom, left, and right.

    position:static;
Copy the code

【relative】 relative

position: relative; Is positioned relative to its normal position. Setting the top, right, bottom, and left attributes of a relative positioned element will cause it to adjust out of its normal position. The rest of the content is not adjusted to fit any space left by the element.

Relative positioning: Positioning relative to the element itself does not leave the document flow

You can use z-index to adjust a hierarchy

If a conflict occurs, use top and left

Generally used to fine-tune the position of elements

After setting relative positioning, elements will not deviate from the document flow and still participate in the flow layout. Their original position is retained and they will be positioned according to their original position when moving

Relative positioning: usually used for minor element positioning, such as hierarchy adjustment (z-index: parameter; Parameter has no specific range, the larger the value is, the larger the value is, the higher the value is, the smaller the value is, the lower it is.

Move the relative positioning element, but the space it originally occupies does not change.

Relatively positioned elements are often used as container blocks for absolutely positioned elements.

(The son must be the father)

    position:relative;
Copy the code

Absolute Meaning in Chinese

position: absolute; Is positioned relative to the nearest positioned ancestor element (not relative to the viewport, as fixed).

However, if the absolutely located element has no ancestor, it will use the body of the document and move along with the page scroll.

Note:”By positioningThe “element is its positionAny element other than static.

Position relative to the nearest non-static ancestor element until the body is not present relative to the body

The z-index adjustment can be used without ascending the document flow hierarchy

The default position is in the document flow

In-line blocks and line elements start absolute positioning as block elements

Usually used to position an element relative to another element

Absolute: The element is set to be removed from the document flow and does not participate in the flow layout and does not have its own position.

Set the absolutely positioned elements in mobile location will be first to see if its parent element for static positioning, if it is a static positioning, is to see its parent the parent element, until find HTML, if found the non-static do relative to the positioning of elements for mobile location, if not find position relative to the entire page.

Set the absolutely positioned elements in mobile location will be first to see if its parent element for static positioning, if it is a static positioning, is to see its parent the parent element, until find HTML, if found the non-static do relative to the positioning of elements for mobile location, if not find position relative to the entire page.

The position of an absolutely positioned element relative to the nearest positioned parent element

If the element has no located parent,

Then its position relative to < HTML >:

Absolute positioning makes the position of an element independent of the document flow and therefore does not take up space.

Absolute Positioned elements overlap with other elements.

(The son must be the father)

    position:absolute;
Copy the code

【 CLIP 】 Clipping absolutely positioned elements.

Used to define a clipping rectangle. For an absolute definition element, the contents of this rectangle are visible. Content outside this clipping area is processed according to overflow values. The clipping area may be larger or smaller than the content area of the element.

[Parameter Value]

Shape Sets the shape of the element. The only valid shape value is: rect (top.right.bottom.left)"auto】 automaticCopy the code

【fixed】 a fixed position

position: fixed; The element is positioned relative to the viewport, meaning that it is always in the same position even if the page is scrolling. The top, right, bottom, and left attributes are used to locate this element.

Fixed positioned elements do not leave gaps where they would normally be placed on a page.

Positioning relative to the browser window defaults to the location in the original document flow

Out of the document flow hierarchy up-scaling can be done using z-Index

Top left bottom right

Not setting the width and height will be stretched by the content

Inline elements and inline blocks become block elements

Generally used in sidebar advertising

Fixed. Elements that are fixed are removed from the document flow, no longer participate in the flow layout, are positioned with reference to the entire page, and no longer scroll with the page

The position of the element is fixed relative to the browser window.

Even if the window scrolls, it doesn’t move:

    position:fixed;
Copy the code

【sticky】 Sticky positioning

position: sticky; The element is positioned based on the user’s scroll position.

Sticky elements switch between relative and fixed depending on where they roll. It is initially positioned relative to each other until a given offset is encountered in the viewport – and then “pasted” into the appropriate position (such as position:fixed).

Turn on sticky positioning relative and fixed combination use

position: sticky; Location based on the user’s scrolling position. The element of sticky positioning is dependent on user scrolling

Switch between position:relative and position:fixed.

It behaves like position:relative; And when the page scrolls beyond the target area

It behaves like position:fixed; It will be fixed in the target position. Element positioning is represented by relative positioning before crossing a specific threshold, and then fixed positioning.

This specific threshold refers to one of top, right, bottom or left, in other words, to specify one of the four thresholds of top, right, bottom or left for sticky positioning to take effect.

Otherwise it behaves the same as relative positioning.

All positioned elements can be repositioned under top, left, left, right, and right

    position:sticky;
Copy the code

Z-index level

Hierarchies solve the problem of cascading

Sets the stack order of elements. Elements with a higher stack order will always precede elements with a lower stack order.

Sets the position of a positioning element along the Z-axis, defined as an axis that extends vertically into the display area. If it is positive, it is closer to the user; if it is negative, it is farther away from the user.

    z-index: Parameter value;Copy the code

[Parameter Value]

auto
number
Copy the code

2.【float】 float layout and clear float

Float layout: div+float+positon

Float: The purpose is to display multiple block elements on the same line

Floating effects:

• Impact on itself: Ascending inline elements and inline block elements outside of the document flow hierarchy will become block elements without overwriting text
• For sibling elements: To affect the layout of sibling elements, add clear
• On parent element: Causes height collapse of parent element

Float Enables floating. Left Floats on the left. Right floats on the right

Element Settings float out of the document flow, no longer participate in the flow layout, and no longer have their place in the document flow

Note:Using floatitBe sure to clean up the float

The child element will drop out of the document stream immediately after being floated, causing the parent element to be unable to prop up and causing a height collapse

Float: Moves an element in a specified direction until it stops at the edge of a parent or sibling float element. Float left. Right right float

Features: 1. Allows elements to be removed from the document flow 2. Allows block elements to be displayed on the same line 3. You can have inline elements support setting width and heightCopy the code

    float:left;
    float:right;
Copy the code

Remove the floating

Clear left Clear right right clear both Clear all

Solution 1: Solve the height collapse of the parent element

Option 3 Add Overflow: Hidden

Option 2: Add an empty label and remove sibling elements

Scheme 4 uses pseudo-elements to clean up floats

See BFC for more solutions

How to solve the height collapse of parent element caused by float

Set the height of the parent element to overflow. Hidden (recommended) 3. The parent element is also set to float (not recommended because it causes the parent element to lose width) 4. Enable BFC(understood) 5.Copy the code

Elements float out of the document flow and need to be cleared if they affect subsequent layouts.

With an empty div, set the clear class name specifically to clear the float

Used to clear float, right, left, both

The default height and width of elements are content spread-out

Clear the influence on yourself

    clear:both; (Both: all, left: left float, right: right float.)Copy the code

Cleanup effect on parent elements (pseudo-element cleanup method)

    .clearfix::before..clearfix::after{
           content: "";
           display:block;
           clear:both;
    }
Copy the code