Relative Positioning Absolute Positioning Fixed Positioning Realization and Application

1. Relative positioning

```css    postion:relative;     ```

Moves the element relative to its position in the normal document flow. Moves an element in the normal layout flow relative to its default position by coordinates. The space it originally occupied will not change.

 basic features

- Doesn't break out of document flow

- Raise the level of elements

- When the offset is not defined, it has basically no effect on the element

2. Absolute positioning

```css    postion:absolute;   ```

Positioning is relative to HTML when there is no positioning parent, and positioning is relative to the nearest positioning parent when there is a positioning parent.

basic features

- out of document flow

- Raise the level of elements

 3. Fixed positioning

```css   postion:fixed;   ```

The position of the element is fixed relative to the browser window, it will not move even if the window is scrolled.

Summary of Basic Features

- out of document flow

- Raise the level of elements

Guess you like

Origin blog.csdn.net/pbaiking/article/details/129208288