CSS: About position and float

In CSS, we are positioned by locating the attribute position, which has the following property values. The common attributes are as follows:

Absolute generates an absolutely positioned element that is positioned relative to the first parent element other than the static anchor. The position of the element is defined by the "left", "Top", "right" and "bottom" attributes.

Fixed generates an absolutely positioned element that is positioned relative to the browser window. The position of the element is defined by the "left", "Top", "right" and "bottom" attributes.

The relative generates relatively positioned elements that are positioned relative to their normal positions. Therefore,"left:20" adds 20 pixels to the left position of the element .

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

Inherit specifies that the value of the position property should be inherited from the parent element.

First of all, we're using the standard box model here, so it's necessary to think of it as a box or a box. Let's start by learning the first default parameter, static.

Static location is the default value of position, the element box is generated normally, that is, no normal display when positioning.

Absolute: Absolute Positioning

Elements are removed from the document stream and positioned relative to the containing block. The element is closed in the original space. The element is positioned to generate a block-level box, whether it is an inline element or a block-level element.

The inclusion block here refers to: The most recent position value is not the ancestor element of static (block-level or in-line), typically an element is specified as the containing block of an absolutely positioned element, its position is set to relative, and there is no offset.

Fixed: Stationary positioning

The element is detached from the text stream, removed from the normal text, and positioned relative to the browser window, so it does not move with the document scrolling. The element is closed in the original space. The element is positioned to generate a block-level box, whether it is an inline element or a block-level element. The difference from absolute positioning is that only the containing block is different.

Include Block: Browser window.

Relative: Relative positioning

Relative positioning, the most common way to use the following two kinds:

Use method One: The element is offset from its original position to a certain distance, but the original space is still retained, showing a blank.

Use Method Two: set an element to position:relative; You can make the element's child elements absolutely positioned relative to that element.

Absolute/fixed and float comparison

The same: elements are separated from the text stream, removed from the normal text, but still affect the layout; a block-level box is generated, regardless of whether it is a block-level element.

The difference: the containing block of float is the most recent block-level ancestor element.

Set Offset property: Top/right/bottom/left, the initial value is auto.

After positioning with position, the offset must be defined with the offset attribute, which is the offset of the relative containing block. It is important to note that the element that defines the offset should be an element that position value is not static.

It is sometimes necessary to define the width and heigth, but it may conflict with the definition of the Offset property because the four offset properties actually define the size of the element. At this point, depending on the width and left properties, define the right and bottom according to the top and height properties.

A property in the CSS. That's content overflow: overflow.

Typically, the content overflow property has the following values:

Overflow:visible/hidden/scroll/auto/inherit

The overflow initial value is visible.

Overflow is what we used to do: If an element is fixed in size, but its contents do not fit, it can cause overflow. Overflow controls the visible (visible), invisible (hidden), rolling-visible (scroll) of the overflow portion.

Element Visibility Visibility:visible/hidden/collapse/inherit, the initial value is visible.

CSS: About position and float