CSS element positioning

1, block-level elements, inline elements, document flow

By precisely controlling the outer moments, borders, inner moments, contents, and positions of each box, CSS enables complex and precise page layouts.

Block-level elements, which have a newline effect by default, typically such as Div

Inline elements, which do not have a line-wrapping effect by default, typically such as span

Document flow, when the HTML element is displayed on the page, according to the order in which it appears in the source code, according to the rule from top to bottom, left to right, block level element exclusive row, line element does not wrap the rules in order. The elements in the document flow have an effect on the position of the subsequent elements.

2. Box positioning

2.1. Relative positioning

When the element is displayed, the specified value is shifted down or to the right relative to its original position, but the element itself is not detached from the document flow, which means that the element in the back is considered to be in its original position, so it is arranged behind the original position of the element (but will cause an overlay)

2.2. Absolute positioning

Offsets are based on the most recently positioned ancestor element (if there is no such ancestor element, the browser window is the baseline), the element itself is detached from the document flow, which means that the element that follows does not exist, so it occupies the original position of this element (but causes an overlay, Does not have the property of a block-level element exclusive line after leaving the document stream)

2.3. Fixed positioning

Similar to absolute positioning, it is also out of the document flow, but always based on the browser window, and the position does not move with the scroll bar

3. CSS properties used for positioning

3.1, Position

(1)Absolute creates an absolutely positioned element, positioned relative to the first parent element other than the static location.

The position of the element is defined by the "left", "Top", "right" and "bottom" attributes.

(2)fixed generates an absolutely positioned element, positioned relative to the browser window.

The position of the element is defined by the "left", "Top", "right" and "bottom" attributes.

(3)relative generates relatively positioned elements, positioned relative to their normal positions.

Therefore, "left:20" adds 20 pixels to the left position of the element.

(4)static default value. No positioning, elements appear in the normal stream (ignoring top, bottom, left, right, or z-index declarations).

3.2, Top,right,bottom,left

(1) Auto

The default value. Calculates the position of the top edge through the browser.

(2)%

Sets the top position as a percentage of the containing element. Negative values can be used.

(3) Length

Use the PX, CM, and other units to set the top position of the element. Negative values can be used.

3.3, Verflow

(1) Visible

The default value. The content is not trimmed and is rendered outside the element box.

(2) Hidden

The content is trimmed and the rest is not visible.

(3) Scroll

The content is trimmed, but the browser displays scroll bars to see the rest of the content.

(4) Auto

If the content is trimmed, the browser displays scroll bars to see the rest of the content.

3.4, Vertical-align

(1) Baseline

Default. element is placed on the baseline of the parent element.

(2) Top

Aligns the top of the element with the top of the highest element in the row

(3) Middle

Place this element in the middle of the parent element.

(4) Bottom

Aligns the top of the element to the top of the lowest element in the row.

(5) Z-index

Number sets the stacking order of the elements. Elements that have a higher stacking order are always in front of elements that are lower in stacking order.

Note: Z-index is only valid for elements that are positioned, not valid for elements in the document flow

3.5. Float FLOAT

(1) If a box floats to the left (Float:left;): this element becomes an inline element, and the block-level element behind it loses half of its exclusive line, that is, the left side is immediately behind the floating element and the right extends to the end of the line. Floating right and left floating effect are similar

(2) can use Clear:both; clear the effect of floating effect on the back box

How to get the coordinates of an element in a page All elements of HTML have the following 5 read-only properties Offsetleft The distance of the element border from the left edge of the page OffsetTop The distance of the element border from the top edge of the page Offsetwidth The width of the element (the span of the left and right borders) Offsetheight The height of the element (the span of the top and bottom border) OffsetParent Returns the ancestor element that has been positioned and, if not, returns body or null.

CSS element positioning