Absolute positioning and relative positioning

Objective

In the process of using CSS control typesetting, positioning has always been considered a difficult point, this is mainly manifested as a lot of netizens in the absence of deep understanding of the principle of positioning, the messy web pages often let them feel at a loss, while the other side of some experts often use the powerful function of positioning to make some cool effect, such as CSS albums and so on , so their cluttered web pages and master perfect design in sharp contrast, this to a certain extent hit the beginner positioning of the netizen, but also in their mind to form such a thought: when I skillfully play CSS positioning, I have been a master. No matter what you think, I just hope the following tutorial will give you a deeper understanding of CSS positioning properties.

Read suggestions

First of all, let me talk about the idea of this tutorial, which is very helpful to you before you start reading the tutorial. My train of thought is this: first give the localization more specialized refining explanation, then use dozen like the method to introduce them vividly, at this time everybody wants to talk with the previous professional explanation compare read. The introduction of the theory, will be through an example of the positioning of the various points of knowledge, although the example is not beautiful, but each instance is carefully selected, if you want to complete the CSS positioning method, please be sure to understand the principle of each instance. In the end, we will take you to a cool comprehensive example. If you want to improve your interest or motivation in reading this article, you can start by jumping to the end to see how the composite instance works.

1. Professional interpretation of positioning

(1) syntax
position:static | Absolute | Fixed | Relative
(2) Description
As can be seen from the above syntax, there are a number of methods of positioning, they are static, absolute positioning (absolute), fixed (fixed), relative positioning (relative). In this tutorial, I do not speak, only the most commonly used is the most practical two positioning methods: absolute positioning (absolute), relative positioning (relative).

absolute Positioning (absolute): Drag the object assigned to this targeting method from the document flow, using left,right,top, bottom and other properties to absolutely locate the parent object closest to its nearest location setting, If the parent of an object does not have an anchor property set, or if it follows an HTML positioning rule, it is positioned as a reference based on the upper-left corner of the body object. Absolute positioning objects can cascade, cascade order can be controlled by the Z-index property, Z-index value is no unit of integers, large at the top, can have negative values (currently negative FF is not supported).
relative positioning (relative): objects are not stackable and are offset from the normal document stream by attributes such as Left,right,top,bottom. You can also use Z-index layering design.

2. Image interpretation of positioning

I'm going to set up a virtual scene: There's a rectangular room with a bucket of water in it, a watermelon in the water, and a lot of hooks for hanging things in midair. Now I have the page element corresponds to the above object, then the room is a Web page, the bucket is a plate in the page, the bucket of water is the text flow, watermelon is to be positioned object.
(1) absolute positioning of contributions (absolute)
Compared to the previous explanation, if the watermelon is given absolute positioning, then it is equal to remove the watermelon from the water hanging in mid-air hooks, the water in the bucket of the original space will automatically fill the watermelon (the absolute positioning of the object will let itself occupy the position, so that it is a contribution). At this time if not before the bucket positioning settings, then picked up the watermelon position will not be affected by the bucket position, how to move the bucket, watermelon or hanging in the original position, as to how to put the watermelon, the room left upper corner (body upper left corner), with Left,right,top,bottom value to locate. But if the bucket is also given the positioning settings (usually relative positioning, the following talk about this practical technique), the watermelon is not placed so free, although at this time the watermelon is picked up will not affect the water in the bucket (text flow), but it is to listen to barrels, barrels will tell the watermelon "you can activities, But it should be in my range, for example, I want you in my upper left 1 meters, you have to die this, I go you also have to follow away ", if the bucket has a lot of watermelon, can be taken out of the hanging in midair, they will be arranged in different heights of space (layer), so in the roof vertical look down, It is possible to see different watermelons stacked together (the so-called height does not exist in the Web page, as the elements are arranged on different layers of the Flash animation, but they do not have a sense of depth when viewed). The object reference target of the visible absolute positioning is its parent, which the profession calls the inclusion block.
(2) The relative positioning of selfishness (relative)
One of the biggest features of relative positioning is that you run away from the position and occupy the original position, not to the surrounding objects such as text flow. Relative positioning is also relatively independent, do what it is the final decision, to locate the time, it is in its own position offset (relative to the object itself). Then take the front for example to solve, then the watermelon seems to have magical, if the watermelon by relative positioning in the bucket offset you will see a real life phenomenon: there is a place in the water concave down, the surrounding water can not fill it, watermelon looks in the side, if stirring the water in the bucket, The concave position will find a change (text flow has an effect on relative positioning objects), but the distance from the concave to the watermelon remains the same. The visible text stream also affects each other because the object is not really out of the flow of text, as there are two of people who have a chance to meet when they move horizontally on the same floor.
(3) summarize the characteristics of two kinds of positioning
Absolute positioning is like arranging different objects into different floors of a high-rise (generally not the first level, which we understand as text flow is on the first floor), they do not affect each other, but how they move is related to the foundation and area of your building (parent). Relative positioning refers to whether the object or the first floor is stored with the text stream, and there must be an impact between them.
(4) Supplement to special circumstances
In the use of relative positioning and absolute positioning, there is a situation is that their positioning values to use a negative value of the object can move in the opposite direction, just said the object is arranged in a building of different layers, if an object is back to the outermost wall at the beginning, and then with a negative position it, it will magically run out of the wall, Of course, there is no such a thrilling and magical thing to happen, I only to take the above example for image interpretation.

Feedback: Web page is the most common text flow, relative positioning in the text flow, but also the text flow, but in the position of the offset, absolute positioning is out of the text stream, and then layered display!

Absolute positioning and relative positioning