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

This article mainly explains "how to set relative positioning and absolute positioning in css". The content in the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn how to set relative positioning and absolute positioning in css.

In css, you can use the position attribute to set relative positioning and absolute positioning, add "position:relative;" style to the element to set relative positioning, and add "position:absolute;" style to the element to set absolute positioning.

The operating environment of this tutorial: windows7 system, CSS3&&HTML5 version, Dell G3 computer.

In css, you can use the position property to set relative positioning (relative) and absolute positioning (absolute).

Relative positioning position:relative

Relative positioning is to fine-tune the position of elements. Let the element fine-tune its position relative to its original position.

In other words, if a box wants to reposition, then relative positioning should be used.

Position:relative; → must first declare that it needs to be relatively positioned, and then left:100px; → will make adjustments. Top:150px; → then makes adjustments.

1. Characteristics of relative positioning-non-delamination, hometown leaving pit, shape and shadow separation

The relative positioning is not off-standard, the real location is in the hometown, but the shadow goes out and can float everywhere.

2. The use of relative positioning

Relative positioning has holes, so it is generally not used for "capping" effect. In the page, the effect is minimal. There are only two functions:

Fine-tuning element

As a reference for absolute positioning, son absolute paternal phase (detailed in absolute positioning)

3. The positioning value of relative positioning

Left,right can be used to describe the right and left movement of the box.

Top,bottom can be used to describe the movement of the bottom and top of the box.

Position: relative;right: 100px; → move to the left top: 100pxpositional position: relative;right: 100pxpositional bottom: 100px; → moves upward. Absolute positioning

Absolute positioning off-standard

Absolute positioning of the box, but also out of the standard document stream. Therefore, the nature of all standard document streams is not followed after absolute positioning.

After absolute positioning, the tag does not distinguish between the so-called inline elements and block-level elements, and the width and height can be set without display:block;

Span {position: absolute; top: 100px; left: 100px; width: 100px; height: 100px; background-color: pink;}

1. Reference point

The absolute positioning reference point, if described in top, is the lower-left corner of the page, not the upper-left corner of the browser:

If it is described in bottom, it is the window size of the browser's first screen and the lower left corner of the corresponding page:

Interview questions:

Answer: when using bottom positioning, refer to the browser's first screen size corresponding to the lower-left corner of the page.

2. Take the box as the reference point-son absolute father phase

An absolutely positioned element, if there is a positioned element in the parent element, then the parent element will be used as the reference point.

Son absolute father, son absolute father phase, son absolute father solid, can give the son the position. However, in engineering, there is no box in the standard document stream, so the page is unstable and has no practical use. In engineering, the "son and fatherly appearance" is meaningful, the father does not lose the bid, and the son moves within the scope of the father.

→ absolute positioning → relative positioning → no positioning

→ absolute positioning, with box2 as the reference positioning.

Absolute positioning of the son, ignoring the reference of that box of padding. In the following figure, the green part is the padding of div, and the blue part is the content area of div. Then at this time, div relative positioning, p absolute positioning.

3. The absolute positioning box is in the center.

After absolute positioning, all the rules of standard flow do not apply. So margin:0 auto; is invalid.

Width: 600pxpositional height: 60pxpositional position: absolute;left: 50% positionTop: 0positionmarginal left:-300px; half of the width of →

It's very simple. Write it down as a formula. That's left:50%;margin-left: half the width of the negative.

Thank you for your reading, the above is the content of "how to set relative positioning and absolute positioning of css". After the study of this article, I believe you have a deeper understanding of how to set relative positioning and absolute positioning of css, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

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.