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

This article mainly introduces the relevant knowledge of "how to realize the positioning in H5". Xiao Bian shows you the operation process through actual cases. The operation method is simple, fast and practical. I hope this article "how to realize the positioning in H5" can help you solve the problem.

I. locating flow classification

1.1 relative positioning

1.2 absolute positioning

1.3 fixed positioning

1.4 static positioning

II. What is relative positioning?

Relative positioning is moving relative to one's previous position in the standard stream

position:relative;

Relative positioning attention points

1. Relative positioning is not out of the standard flow, will continue to occupy a space in the standard flow

2. In relative positioning, only one positioning attribute can be used in the same direction (i.e., left is used instead of right; top is used instead of bottom).

3. Since relative positioning is not out of the standard flow, block level elements/inline elements/inline block level elements are distinguished in relative positioning.

4. Because relative positioning is not out of the standard flow, and the relatively positioned element will occupy the position in the standard flow, when setting the margin/padding attribute for the relatively positioned element, it will affect the layout of the standard flow (margin/padding will be added to the box position before positioning).

Relative positioning application scenarios

1. Used to fine-tune elements

2. Use it in conjunction with the absolute positioning of the later learning

.box2{

background-color:green;

position:relative;

top:20px;

left:20px;

margin-top:20px;//will be added to the position before positioning

}

III. What is absolute positioning?

Absolute positioning is positioning relative to the body

position:absolute;

careful

1 Absolute positioning of elements is out of the standard flow

2 Absolute positioning of elements is indistinguishable block level elements/inline elements/inline block level elements

.box2{

background-color:green;

position:absolute;//absolute positioning

left:0;

bottom:0;//in the bottom left corner of the body

}

IV. absolute positioning reference point

law

1. By default, all absolutely oriented elements, with or without ancestor elements, take body as the reference point.

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

2.1 Any ancestor element of this absolute positioning element can be

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

2.3 Only static positioning in the positioning flow is not good

3. If an absolutely positioned element has an ancestor element, and the ancestor element is also a positioning stream, and more than one of the ancestor elements is a positioning stream, then the absolutely positioned element will take the ancestor element of the closest positioning stream as the reference point.

v. careful

If an absolutely oriented element uses the body as a reference point, then it is actually the width and height of the first screen of the page as a reference point, rather than the width and height of the entire page as a reference point;

The content of "how to realize positioning in H5" is introduced here. Thank you for reading it. If you want to know more about industry-related knowledge, you can pay attention to the industry information channel. Xiaobian will update different knowledge points for you every day.

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.