Several ways to position in front-end projects

We know that in front-end projects, we use the positioning attribute position to perform positioning, so what specific attribute values ​​does it have? What are the common positioning methods? Let me summarize it for you today.

Value Description

absolute Generates an element with absolute positioning, positioned relative to the first parent element other than static positioning. The position of the element is specified through the "left", "top", "right" and "bottom" attributes.

fixed Generates absolutely positioned elements, positioned relative to the browser window. The position of the element is specified through the "left", "top", "right" and "bottom" attributes.

relative Generates relatively positioned elements, positioned relative to their normal position. Therefore, "left:20" adds 20 pixels to the element's LEFT position.

static Default value. Without positioning, the element appears in normal flow (ignoring top, bottom, left, right or z-index declarations).

inherit specifies that the value of the position attribute should be inherited from the parent element.

First of all, what we use here is the standard box model, so everyone must think of it as a box or a frame when analyzing it. Let's first learn about the first default parameter static.

static: Static positioning is the default value of position. The element box is generated normally, that is, it is displayed normally without positioning.

absolute: Absolutely positioned

elements are removed from the document flow and positioned relative to the containing block. The element is closed in its original space. A block-level box is generated after the element is positioned, regardless of whether it was originally an inline element or a block-level element.

The containing block here refers to the ancestor element (block level or inline) whose latest position value is not static. Generally, an element is designated as the containing block of the absolutely positioned element, and its position is set to relative and there is no offset.

fixed: fixed positioning

The element is detached from the text flow, removed from the normal text, and positioned relative to the browser window, so it does not move as the document scrolls. The element is closed in its original space. A block-level box is generated after the element is positioned, regardless of whether it was originally an inline element or a block-level element. The only difference from absolute positioning is the containing block.

Containing block: browser window.

relative: Relative positioning

Relative positioning, the most common ways to use it are as follows:

Usage method one: The element is offset by a certain distance relative to its original position , but the original space is still retained and appears as blank.

Usage method two: Set an element to position: relative; to make the child elements of the element absolutely positioned relative to the element.

Absolute/fixed and float comparison

The same thing: the elements will be separated from the text flow and deleted from the ordinary text, but it will still affect the layout; a block-level box will be generated, regardless of the original Not a block-level element.

Difference: The containing block of float is the nearest block-level ancestor element.

Set offset attributes: top/right/bottom/left, the initial value is auto.

After using position positioning, you must use the offset attribute to define the offset, which is the offset relative to the containing block. What you need to pay attention to when using it is that the element defining the offset should be an element whose position value is not static.

Sometimes it is also necessary to define width and height, but it may conflict with the definition of the offset attribute, because the four offset attributes actually define the size of the element. At this time, the left and right are defined according to the width and left attributes, and the top and bottom are defined according to the top and height attributes.

Another property in CSS. Then content overflow: overflow.

Usually the content overflow attribute has the following values:

overflow: visible/ hidden/ scroll /auto/ inherit

The initial value of overflow is visible.

Overflow is what we often use: if the size of an element is fixed, but its content cannot fit, it will cause overflow. Overflow controls the visibility, invisible (hidden), and scroll visibility (scroll) of the overflow part.

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

# I believe you have mastered the methods after reading these cases. For more exciting information, please pay attention to other related articles on the php Chinese website!

Related reading:

Tutorial on making div width adaptive

How to change the mouseover style without using CSS

How to optimize HTML web pages

The above is the detailed content of Several ways to position in front-end projects. For more information, please follow other related articles on the PHP Chinese website!