Shulou(Shulou.com)06/02 Report--

This article focuses on "how to understand the positioning mechanism of Web front-end CSS", interested friends may wish to take a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn how to understand the positioning mechanism of Web front-end CSS.

Positioning (position)

As the name suggests, you can decide wherever you want.

The positioning attribute of an element mainly includes two parts: positioning mode and edge offset.

(1) location mode

Syntax for positioning: position: attribute value

Common values of the position property

Static automatic positioning (default positioning method)

Relative relative positioning, relative to the location of its original document stream

Absolute absolute positioning, relative to the previous parent element that has been positioned

Fixed fixed positioning, relative to the browser window

1) static positioning (static)

The default location in the document stream, the standard stream property.

Position: static will be used to cancel the location.

HTML

CSS

The offset attribute cannot be used.

2) relative positioning (relative)

Relative positioning is to position an element relative to its position in the standard stream, and when the value of the position attribute is relative, you can position the element in a relative position.

HTML

CSS

browser

After setting the relative positioning of the element, you can change the position of the element by the edge offset attribute, but its position in the document flow is still retained and does not fall off the mark.

CSS

browser

Relatively positioned elements do not wrap the inner block

3) absolute positioning (absolute)

It does not occupy a position and can be placed anywhere in the parent box.

The element is automatically converted to inline blocks, and the width and height are related to the content.

HTML

CSS

Son absolute father / son absolute father (very important)

The child is absolute positioning, so the nearest parent must give a relative positioning (absolute positioning if necessary), otherwise the child will navigate to the browser's current page, and you may not be able to see it.

4) fixed positioning (fixed)

Fixed positioning is out of the control of the standard document flow and always defines its own display position according to the browser window, which has nothing to do with the parent.

Completely off the mark, scrolling the scroll bar does not affect its position in the browser window.

The element is automatically converted to inline blocks, and the width and height are related to the content.

HTML

CSS

browser

(2) Edge offset

Top top offset, which defines the distance of an element from the upper edge of its parent element

The offset at the bottom of bottom, which defines the distance of an element from the underside of its parent element

Left left offset, which defines the distance of an element from the left edge of its parent element

Right right offset, which defines the distance of an element from the right edge of its parent element

At this point, I believe you have a deeper understanding of "how to understand the positioning mechanism of Web front-end CSS". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.