Foreword
This blog I want to get the problem is ①absolute and the relative difference ② top and margin-top ③ difference inside and outside the browser default margins body
Body inside and outside the browser default margins
Very often study the source code of some sites, there will always see other people's CSS file, it reads "body {margin: 0; padding: 0;}", so why add such a sentence it? First with the following phenomena thrown out.
The following code
Wherein the layer 1 in addition to the color and width settings do not do anything special, the only difference between the layer and the layer div3 div2 is a relative and is positive, then the D1 and D2 which is 50px it? The answer is that the distance D1 is 50px. Then on the layer 2 and layer 3 Why is not aligned to the left of it? No matter because there must be a demon! I looked at the code before I write this blog is also relative and absolute also have some understanding of, the book says so. "If an object set position relative property value, the object will remain in normal HTML stream, but its position can be shifted based on its previous target, "I saw the word pull" before a target, "the words. As can be seen from the code layers 1 and 2 at the same level of the hierarchy, i.e., the layer 2 is a layer which is the parent element of the body only. At this point of my head as sobering like, does it here mischief? Ever since, I would add border body of a black background color, as follows
Well, it finally caught up, you can see the black dashed box from the browser comes surrounded by white some distance, this is the default margin of the body. Find the reasons, the browser by default, <body> of the width to the <html> small width, here I set a little bit, so that both of the same width as follows
As can be seen from the figure, an increase of only margin: 0; this will have a significant different, the first body frame boder adhesion browser, then the layers 2 and 3 are also aligned left.
position:relative
First, look at the official interpretation of the position of: position the positioning mechanism attribute defines the layout of the elements used. Any element can be located, but the absolute or fixed element will generate a block-level box, regardless of what type of the element itself. The relative positioning of the elements will be relative to its default position offset in the normal stream . can not read it? Do not look at it first. Come to understand how the "document flow", "normal flow", Baidu Encyclopedia is explained "document flow": The form is divided into a top-down line by line, and press the emissions from left to right in each row of elements, that is, document flow (own understanding is that from start to finish in the order document, which is in what position in what position, can also be understood in the meaning of the above, top-down, order from left to right). Let an HTML document with the layout mechanism is a flow model, i.e., block element (block) on a line by inline elements (inline) without a separate line. The following code shows the first with what is called the "normal flow" (that is, the position in what in what position),
Div it is because the block-level element, a separate line, even if the width so that the image above layers 1 and 2 is much less than the width of the browser, still divided into two lines, which is called the normal stream.
Conversely then positioned opposite relative, official interpreted as "to generate relative positioning element, for positioning relative to its normal position." Note that the above-mentioned "relatively positioned elements will be offset relative to its normal stream of the default position", i.e. opposite its own default position is not Amaoagou. Will be positioned opposite to the layer 2, and the left set 100px,
Can clearly see that layer 2 with respect to its default position 100px moved to the right (left if negative, then moves to the left).
position:absolute
The official explanation for the absolute "element generates absolutely positioned, relative to the first parent element other than static positioning positioning." First, know about static, static is the default position, which means no positioning elements appear in the normal stream. By following illustration shows how absolute function.
Layer 2 is set to absolute, the absolute by definition, it has been looking up this tree parent element, to find the position for non-static elements, to find after the offset reference element, if the head also found We did not find, naturally, to the body as a reference.
A look at the following example
FIG above, no postion div1 provided, so that the default attribute as static, is div1 div2 parent element, parent element is div1 body. Div2 at this time to start looking for a reference point, look at its parent element, found value is static, does not meet the conditions, and then further on the investigation, found that body is static, and then further on the investigation, but has in the end, how do? It will only use the body!
Here another example, as I only add a line, the position is set to relative value div2
Div2 position at this time of change, and look it up first parent element div1, find the position property of the parent element is non-static, good to use it as a benchmark!
Here, basically over, but one thing to note if you want the absolute positioning absolute effect, you must specify the left, right, top and bottom properties at least one !
There are also stacked, after repeat.
Finish
