Positioning in H5

This time I will bring you the positioning in H5, what are the precautions for positioning in H5, the following is a practical case, let's take a look.

1. Positioning flow classification

1.1 Relative positioning
1.2Absolute positioning
1.3Fixed positioning
1.4Static positioning

2. What is relative positioning?

Relative positioning is to move relative to its previous position in the standard stream
position: relative;

Notes on relative positioning

1. Relative positioning does not break away from the standard flow and will continue to occupy a space in the standard flow.
2. In relative positioning, only one can be used for the positioning attribute in the same direction (that is, use If you use left, don’t use right; if you use top, don’t use bottom).
3. Since relative positioning does not deviate from the standard flow, block-level elements/inline elements are distinguished in relative positioning. Element/inline block-level element
4. Since relative positioning does not deviate from the standard flow, and relatively positioned elements will occupy positions in the standard flow, when setting attributes such as margin/padding for relatively positioned elements, it will Affects the layout of the standard flow,(margin/padding will be added to the box position before positioning)

Relative positioning application scenario

1. Used for Fine-tune the elements
2. Use it in conjunction with the absolute positioning you will learn later

       .box2{
            background-color: green;
            position: relative; //相对定位
            top: 20px;
            left: 20px;
            margin-top: 20px;//会加在定位之前的位置上
        }

3. What is absolute positioning?

Absolute positioning is positioning relative to the body
position: absolute ;

Notes

1Absolutely positioned elements are out of standard flow
2Absolutely positioned elements do not distinguish between block-level elements/inline elements/inline block-level elements

.box2{
            background-color: green;
            position: absolute; //绝对定位
            left: 0;
            bottom: 0; //在body的左下角
        }

4. Absolute positioning reference point

Rule

1. By default, all absolutely positioned elements, regardless of whether they have ancestor elements or not, will use the body as the reference point

2. If an absolutely positioned element has an ancestor element, and the ancestor element is also a positioning stream, then the absolutely positioned element will use the ancestor element of the positioning stream as a reference point

2.1 As long as this The ancestor elements of absolutely positioned elements can all be used

2.2 The positioning flow refers to absolute positioning/relative positioning/fixed positioning

2.3 Only static positioning in the positioning flow will not work

3 .If an absolutely positioned element has an ancestor element, and the ancestor element is also a positioning flow, and there are multiple elements in the ancestor element that are positioning flows, then the absolutely positioned element will be based on the ancestor element of the positioning flow closest to it. Reference points

5. Note points

1. If an absolutely positioned element uses the body as the reference point, then it actually uses the width and height of the first screen of the web page as the reference point, not Use the width and height of the entire web page as a reference point;

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the PHP Chinese website!

Recommended reading:

The layout method of web pages: clearing floats

The box model of HTML and CSS

The above is the detailed content of Positioning in H5. For more information, please follow other related articles on the PHP Chinese website!