Learn about absolute positioning and relative positioning of Div + CSS

Last Update:2018-12-07 Source: Internet

Author: User

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

Preface

In the process of controlling the layout with CSS, positioning has always been regarded as a difficulty. This is mainly because many netizens do not have a deep understanding of the positioning principle, the messy web pages are often overwhelming, while some experts on the other side often use the powerful functions of positioning to make some cool effects, such as CSS album, therefore, the messy web page is in stark contrast with the perfect design of the experts. This has targeted beginners to a certain extent and has formed such an idea in their minds: when I was proficient in CSS positioning, I became a master. Whatever you think, I only hope that the following tutorial will give you a deeper understanding of CSS positioning attributes.

Reading suggestions

Let me talk about my ideas for this tutorial. This will be of great help to you before you begin to read the tutorial. My idea is as follows: first, I will give a more professional and refined explanation of positioning, and then I will introduce them in an image like a method. At this time, we will compare it with the professional explanation mentioned above. After introducing the theory, we will introduce the knowledge points of positioning through examples. Although the examples are not beautiful, each instance is carefully selected. If you need to fully master the CSS positioning method, be sure to understand the principles of each instance. At last, we will show you a cool integrated instance. If you want to improve your interest or motivation to read this article, you can jump to the end to see the overall instance running effect.

1. Professional positioning SolutionsRelease

(1) syntax
Position: static | absolute | fixed | relative
(2) Description
From the above syntax, we can see that there are many methods for positioning. They are static, absolute, fixed, and relative ). In this tutorial, I will not talk about it one by one. I will only talk about the two most common and practical positioning Methods: absolute location and relative ).

Absolute location (absolute ):Drag an object assigned to this positioning method out of the Document Stream and use left, right, top, bottom and other attributes are absolutely located relative to the parent object with the closest positioning settings. If the parent object does not have the positioning attribute set, it still follows the HTML positioning rules, the location is based on the upper left corner of the body object as a reference. The absolute positioning object can be stacked, and the cascade order can be controlled through the Z-index attribute. The Z-index value is an unmeasured integer, and the largest value is at the top, there can be negative values (currently, negative FF is not supported ).
Relative ):Objects cannot be stacked, and their positions are offset in normal document streams based on left, right, top, bottom, and other attributes. You can also use the Z-index hierarchical design.

2. Positioning image explanation

Let me first set up a virtual scenario: There is a rectangular room with some water in the bucket and a watermelon in the water, there are still many hooks in the room for hanging objects in the air. Now that I map the webpage elements to the objects above, the room is a webpage, the bucket is a section in the webpage, the water in the bucket is a text stream, and the watermelon is the object to be located.
(1) Absolute contribution (absolute)
As explained above, if a watermelon is given absolute positioning, it is equivalent to fishing it out of the water and hanging it on a half-empty hook, the water in the original space occupied by the watermelon in the bucket will automatically fill it (the absolute positioning object will give itself the original space occupied, so it is contributed ). If you have not set the position of the bucket before, the position of the picked-up watermelon will not be affected by the bucket position. How can the bucket be moved? How can the watermelon be placed, take the upper left corner of the room (the upper left corner of the body) as the standard, and use the left, right, top, and bottom values to locate the room. However, if the bucket also provides positioning settings (usually relative positioning, which is described below), the placement of watermelon will not be so free, even if the watermelon is picked up, it will not affect the water in the bucket (Text Stream), but it still needs to listen to the bucket, the bucket will tell the watermelon "you can activity, but I should move around in my scope. For example, if I want you to be at one meter in the top left of me, you will die. If I leave, you will also follow ", if there are many watermelons in the bucket, they can all be taken out and lifted to the semi-air. They will be arranged in spaces of different heights (layers), so you can see them vertically on the roof, it is possible to see that different watermelons are stacked together (the so-called height does not exist in the webpage, just as elements are arranged on different layers in Flash animation, but they do not have a deep feeling when they are watching ). It can be seen that the reference target of an absolutely positioned object is its parent level, and the major is called the inclusion block.
(2) selfish relative positioning (relative)
One of the biggest features of relative positioning is that it still occupies the original position by positioning and does not give it to objects such as text streams. Relative positioning is also relatively independent. It determines what to do. When positioning, It is offset by its own location (offset from the object itself ). Taking the front side as an example, watermelon seems to have magic at this time. If the watermelon is shifted to the bucket through relative positioning, you will see a phenomenon that does not exist in real life: there is a place in the water where the water is down and the surrounding water cannot fill it. The watermelon looks next to it. If you stir the water in the bucket, the concave position will be changed (the text stream still affects the relative positioning object), but the distance from the concave position to the watermelon remains consistent. It can be seen that the text stream and it will also affect each other, because the object is not really separated from the text stream, just as two people will have a chance to move horizontally on the same floor.
(3) summarize the features of the two positioning methods.
Absolute positioning is like arranging different objects to different floors of a tall building (usually not the first layer. Here we understand that text streams are placed on the first layer). They do not affect each other, but how they move is related to the ground and area (parent level) of your building. Relative positioning means that objects are stored together with text streams on the first floor, and there must be an impact between them.
(4) Supplement to special circumstances
When relative and absolute positioning are used, one of the situations is that when their positioning values use negative values, the object can be moved in the opposite direction, the object is arranged on different layers of a building. If an object is backed by the outermost wall at the beginning, locate it with a negative value, it will magically run out, of course, in reality, there may be no such thrilling and magical thing, I just want to extend the above for image interpretation.

(1) No positioning settings. Objects follow HTML positioning rules. Generally, the child level does not run out of the parent level (the Child level does not use negative Boundary Conditions). The child level is generally dependent on the upper left corner of the parent level, and the parent level is placed at the lowest level.

RunCodeBox
[Code]