Network Security Internet Technology Development Database Servers Mobile Phone Android Software Apple Software Computer Software News IT Information

In addition to Weibo, there is also WeChat

Please pay attention

WeChat public account

Shulou

CSS Analysis of position:relative/absolute Positioning Mode

2025-03-29 Update From: SLTechnology News&Howtos shulou NAV: SLTechnology News&Howtos > Network Security >

Share

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

I. position:relative relative positioning

The analysis is divided into two situations:

No position: relative

There is position: relative.

The code is shown below:

The display effect is as follows:

We add the position: relative attribute to box4. * if the element adds a position: relative attribute; the element defaults to the block level element. * if TRBL (top, right, bottom, left) is not given, the location and style of the element remain unchanged. * when a TRBL is given, it is moved relative to the previous position (the initial position of the element, or the position when the element has not added position: relative). * and box4 is liberated and will not be wrapped by the parent element. 2. Position: absolute absolute positioning # #

The analysis is divided into three situations:

No position: absolute

There is position: absolute

There is position: absolute, and add position: relative to the parent element.

The code is shown below:

The browser displays as follows:

The second case: * add the position: absolute attribute to box4. * if the element adds a position: assolute attribute, the element defaults to display: inline-block. * if no TRBL (top, right, bottom, left) is given, the position of the element remains the same, but only becomes an inline element. * when TRBL is given, it is moved relative to Body. The third case: * add the position: relative attribute to box4. * if the element adds a position: relative attribute; the element defaults to the block level element. * if TRBL (top, right, bottom, left) is not given, the location and style of the element remain unchanged. * when a TRBL is given, it is moved relative to the previous position (the initial position of the element, or the position when the element has not added position: relative). * and box4 is liberated and will not be wrapped by the parent element.

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.

Views: 0

*The comments in the above article only represent the author's personal views and do not represent the views and positions of this website. If you have more insights, please feel free to contribute and share.

Share To

Network Security

Wechat

© 2024 shulou.com SLNews company. All rights reserved.

12
Report