Home > Developer > Web Develop
@ Reference Document: http://www.cnblogs.com/jenry/archive/2007/07/15/818660.html
@ What does it mean to leave the document stream? Note that only absolute positioning absolute and floating float will be out of the document Stream!
answer : The CSS out of the flow of the document, that is, the elements from the normal layout of the text taken away, the other boxes in the location, as the elements out of the flow of the document will not exist and positioning .
---Partial disregard and utter disregard for the difference? It is important to note that when you use float to detach from the document flow, the other boxes ignore the element, but the text inside the other box will still make a position for the element, wrapping around it (which can be said to be partially ignored). For elements that use absolute positioning to detach from the document flow, the text in other boxes and other boxes ignores it. (can be said to be completely ignored)
@ relative positioning and absolute positioning of the classic case, as well as the percentage layout of the classic case , in the blog park file space can be downloaded test, in the library BOOTSTRAP3 common layout practice cases can also be found.
@ Precautions :
1, (!!! Relative offset causes LABEL element overlap problem!!! the problem with the layout is that a div that uses relative positioning relative and offsets relative to its original position will be shifted to the other Div's position (instead of having the other tabs open, but overlapping), such as a div that offsets 20px downward. Then the div below will overlap with the top div. Workaround? The lower div also sets the relative positioning relative property, and the 20px displacement occurs, it is possible.
2, (!!! Element labels occupy document flow issues!!! For example, the UL Li Tag, Li set the float, will not occupy space, UL does not set the float, set the height and width will occupy space (document flow), that is, only the outer and inner elements are set to float, will be out of the document flow.
3, (!!! Clear internal float!!! the inner element is set to float, the outer element does not set the float and height, the inner element cannot open the outer element height problem, how to solve, the following code and diagram?
<style>
. par {
border:5px solid #fcc;
width:300px;
/*height:110px; Note that this gives the outer element a corresponding height, and the outer element wraps the inner element and takes up the document flow */
/*float:left; or set a float for the outer element, and the outer element wraps the inner element, but does not occupy the document flow space */
}
. Child {
border:5px solid #f66;
width:100px;
height:100px;
Float:left;
}
</style>
<body>
<div class= "Par" >
<div class= "Child" ></div>
<div class= "Child" ></div>
</div>
</body> < Span class= "Hljs-attribute" >
/span>
---the upper code shows the page (the inner element cannot open the outer element)
---above gives 2 solutions, the first scheme, the outer element set height, write dead, if the internal element height changes, the outer layer element is written dead, not very good. The second solution is not very good to be out of document flow. The best solution (Add the overflow attribute to the outer element):.par { overflow: hidden; } //清除内部浮动，外层元素par在计算高度时，par内部的浮动元素child也会参与计算。
@ Float --- float is the overbearing property of the block element, the behavior of the exclusive line, the cancellation, the other element object and his line.
0,float is designed to achieve text wrapping effect http://www.cnblogs.com/liyunhua/p/4670908.html
1, definition : A floating box can be moved left or right until its outer edge touches the border of the containing box or another floating box .
---Floating is actually, this block, separated from the original document flow pattern, without an exclusive attribute, the element object behind it, as if it does not exist.
2, note that the effect of adding the left attribute, such as, Div1 to the left to the top of the body boundary,Div2 thought div1 not exist, ran up, Div1 will cover the top of the div2. block, cover the DIV2, the div2 width magnification can see div2.
---Note that in 2 this number is not in the original position, but was div1 open, why? Notice that the top is out of the document flow definition , Div2 ignores the div1 element, but the text inside the div2 will still give the div1 a position around the DIV1. Which is partly ignored.
3. Two common applications for floating :
The most common use of---floats is that several tag elements are all floating and listed in a row. For example, if you give div2, add a float:left, float, div2 will not overlap with div1, but the same, like Div3.
---Floats there is also an application, that is, the layout, usually a single div floating up, for layout.
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<title> Untitled Document </title>
<style type= "Text/css" >
div{
width:100px;
height:100px;
font-size:24px;
Font-weight:bold;
}
#one {background:red;float:left;}
#two {background:green;width:200px;height:200px;}
#three {background:blue;}
</style>
<body>
<div id= "One" >1 with floating properties left </div>
<div id= "both" >2</div>
<div id= "three" >3</div>
</body>
3,* * * * * * * : Floating floating, first floating after moving , floating objects, will first float up, leaving the original position, after moving, is the object behind it. will move up to its original position.
@ Location
1, positioning of the classification
---default value static is not located!!! So it cannot be used as a reference for absolute positioning.
---relative positioning of the reference is self.
---fixed positioning, is to put a tag element, placed in a certain location of the site, such as the lower right corner, regardless of how the browser zoom out, it is in the lower right corner, even if it is not visible, in fact, it is still in the lower right corner. In layman's words, a tag element is positioned somewhere on the page. Fixed does not have a bit of flexibility relative to relative positioning and absolute positioning, so many places cannot be fixed, such as masking layers and so on.
(1), what is relative positioning?
Relative,css in the wording is: position:relative; He means absolute relative positioning, he refers to the original point of the parent is the original point, no parent with itself as the original point, with TRBL to locate, when the parent has padding and other CSS properties, the current level of the original point is referenced to the parent content area of the original point to locate.
In the document flow, each block element is arranged in a position in the stream, and we can rearrange its position by positioning properties in the CSS. Positioning is divided into relative positioning and absolute positioning, relative positioning is relative to the position of the block element in the document flow (that is, relative to their original location!) If the property is set to position:relative;top:0px;left:0px, that means the position is the same! Relative to their original position has not changed, some people will ask? since there is no change, why add this attribute, the answer in order to act as a reference to the absolute positioning of the label element, see the 2nd article on the absolute positioning of the referential problem. For example, we can use relative positioning to put div2 on the right side of DIV1, and the code and example graphs are as follows:
#div1 {
border:1px solid #000099;
height:60px;
width:200px;
margin:2px;
}
#div2 {
border:1px solid #000099;
height:60px;
width:200px;
margin:2px;
position:relative;
Top: -64px;
left:204px;
}
#div3 {
border:1px solid #000099;
height:60px;
width:200px;
margin:2px;
}
Can see an interesting phenomenon, that is, although we removed the div2, but there is a space between Div1 and Div3, indicating that the relative positioning of the elements will occupy the document flow space, where the div2 is the typical "standing manger not to poop."
Note that the position:relative is set in the label, the values of left,right and Top,bottom are not set, and the default value is 0. Note that even if you do not set a value that also plays a relative role, its descendant level labels use Position:absolute, which also plays a positioning effect.
(2), what does absolute positioning mean?
Focus: Absolute positioning by default refers to the upper left corner of the browser, with the top, right, BOTTOM, Ieft (hereinafter referred to as TRBL) for positioning, in the absence of TRBL, the default is based on the parent of the original point is the original point.
If you set TRBL and the parent does not set the Position property, the current absolute is positioned as the original point in the upper left corner of the browser, and the position is determined by TRBL.
If the parent sets the position property, such as position:relative, the child element is positioned as the original point in the upper-left corner of the parent. This can be a good solution to the Adaptive site label deviation problem, that is, the parent is adaptive, then my child element is set Position:absolute, the parent element is set position:relative, and then the TRBL is expressed as a percentage width.
Using absolute positioning can also put div2 to the right of DIV1, and absolute positioning will not occupy the document flow space, such as, DIV1 and Div3 there is no space between:
---Absolute positioning makes the position of an element independent of the document flow, so it does not occupy space (that is, a label with an absolute positioning property set, and its bottom label ignores its existence because it does not occupy space.) )。 This is different from relative positioning, where relative positioning is actually considered part of the normal flow positioning model because the position of the element is relative to its position in the normal stream.
CSS code for DIV2:
{Absolute positioning is a good thing, you can display the content to any location on the page, but for our programmers, but we can not use too much absolute positioning, because the use of the program dynamically add content to the Div, the size of the div is not known, the location of each div cannot be determined to die.
Absolute positioning is a double-edged sword, the use of bad, the browser or the screen of the large reduction, will make it a serious dislocation change!!!
Reference Document: Http://blog.chinaunix.net/uid-14767524-id-2785537.html
Note that absolute positioning, it is important to select a relative positioning property, and the position will not change the label element to be positioned.
2, the key, the ultimate explanation, about the absolute positioning reference problem!!!
(1), the hierarchical relationship is:
<div ——————————— position:relative; Not the nearest ancestor-positioning element, not a reference.
<div —————————-not set to anchor element, not reference
<div ———————-position:relative Reference
<div Box1
<div Box2--–position:absolute; top:50px; left:120px;
<div Box3
：
(2), to change the effect of the reference (Orange box)
The hierarchy relationship is:
<div ——————————— position:relative; The nearest ancestor-positioning element, reference
<div —————————-not set to anchor element, not reference
<div ———————-not set to anchor element, not reference
<div Box1
<div Box2--–position:absolute; top:50px; left:120px;
<div Box3
：
(3), the reference is the most top-level element case .
The hierarchy relationship is:
<div ——————————— not set to anchor element, not reference
<div —————————-not set to anchor element, not reference
<div ———————-not set to anchor element, not reference
<div Box1
<div Box2--–position:absolute; top:50px; left:120px;
<div Box3
：
(4) only use the Margin property layout to position elements absolutely
In this case, the values of Margin-bottom and margin-right no longer affect the elements in the document flow because the element has been detached from the document flow. In addition, regardless of whether its ancestor element is positioned, it is offset from the original position in the document stream.
In Figure 9, you use the Margin property layout to position elements relative to each other.
The hierarchy relationship is:
<div ——————————— position:relative; Not a reference.
<div —————————-not set to anchor element, not reference
<div ———————-not set to anchor element, not reference
<div Box1
<div Box2--–position:absolute; margin-top:50px; margin-left:120px;
<div Box3
：
(5), in the case of IE6, box2 before the sibling node, the value of Margin-left will appear double margin, see Figure 10.
The hierarchy relationship is:
<div ——————————— position:relative; Not a reference.
<div —————————-not set to anchor element, not reference
<div ———————-not set to anchor element, not reference
<div Box1
<div Box2--–position:absolute; margin-top:50px; margin-left:60px;
<div Box3
：
3, the ultimate solution:
---Reference with relative positioning, sub-elements with absolute positioning, and ensure that the relative positioning reference will not be offset.
4, the absolute positioning of the layer is set to refer to the location of the layer, you can use top,left these to set the position, if its superiors or superiors are not located in the words will only be based on the position of the body to locate, and the last point, absolute positioning is not occupy the position, it will be like the layer of PS as a separate layer, As for the first layer you can set by Z-index: this property.
Site layout------Floating (float) and positioning (position) (absolute positioning, relative positioning, static fixed positioning), * * * what is called out of the document flow?
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
