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

This article mainly introduces CSS relative positioning and absolute positioning how to use the relevant knowledge, the content is detailed and easy to understand, the operation is simple and fast, has a certain reference value, I believe everyone read this CSS relative positioning and absolute positioning how to use the article will have some gains, let's take a look at it.

I. Relative positioning

Relative positioning means that the element is offset from its original position by a certain distance. The element can be positioned by the top, bottom, left and right attributes. It's relative to itself.

For example: big div contains 5 small P, give P different class names, set absolute positioning and relative positioning respectively, see what changes they have

The codes without positioning are as follows:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

*{padding: 0;margin: 0;}

.box{width: 400px;height: 500px;border: 1px solid black;margin: 50px auto;}

.p1{width: 100px;height: 100px;background: red;}

.p2{width: 100px;height: 100px;background: orange;}

.p3{width: 100px;height: 100px;background: yellow;}

.p4{width: 100px;height: 100px;background: green;}

.p5{width: 100px;height: 100px;background: purple;}

11

22

33

44

55

The effect is as shown in the figure:

Now set the first p tag relative to its original position, so that it is offset by 50px and 50px to the left. The code is as follows:

1

.p1{width: 100px;height: 100px;background: red;position: relative;left: 50px;top: 50px;}

Effect drawing:

Comparing the effect diagram before and after, have you found the first p element, it has shifted relative to its original position, and after the offset, it still occupies the original position, the elements behind it will not fill, if there is overlap, it will overlap on top of its document flow elements, and the relative positioning will not squeeze out other elements.

II. Absolute positioning

Absolute positioning means that the element is offset from its parent element by a certain distance, and the element can be positioned by the top, bottom, left, and right attributes.

Note: The opposite is the parent element, and the parent element must have the position attribute set. If the parent element does not have a position attribute, the search starts with the nearest parent element and continues until the body is found.

For example: Set the absolute positioning of the third p element, so that it is offset by 200px and offset by 200px to the left. The specific code is as follows:

1

.p3{width: 100px;height: 100px;background: yellow;position: absolute;left: 200px;top: 200px;}

Effect drawing:

Comparing Figure 1 with Figure 3, we can see that elements with absolute positioning will be separated from the document flow, and the elements behind will fill in. Because the third p tag has a div parent, it doesn't have the position attribute set to div, so it ends up finding the body, offset from the body.

Difference between relative positioning and absolute positioning

Relative positioning: offset from its original position, does not leave the document flow, does not delete its original position in the document flow, and the following elements do not fill the gap

Absolute positioning: an offset relative to its parent element (and the parent element must have the position attribute set, if the parent element does not have the position attribute, start with the nearest parent element until you find the body), will fall out of the document flow, and the following elements will fill its original position.

About "CSS relative positioning and absolute positioning how to use" the content of this article is introduced here, thank you for reading! I believe everyone has a certain understanding of "how to use relative positioning and absolute positioning in CSS." If you still want to learn more knowledge, please pay attention to the industry information channel.

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.