(a): properties of the position
1.absolute: Generates an absolutely positioned element that is positioned relative to the nearest position of a static parent element;
2.relative: Generates relatively positioned elements, positioned relative to their normal document flow position;
3.static: Default value, no positioning, element appears in normal document flow;
4.fixed: Old IE does not support, and absolute consistent, relative to the window to locate, when the scroll bar appears, do not scroll with scrolling;
5.sticky: (CSS3) has a compatibility problem, it is like a relative and fixed fit, when in the screen by the regular flow layout, when scrolling to the outside of the screen is displayed as fixed. The performance of this property is the adsorption effect you see in reality.
(ii): General questions about the use of position
1. If there is a default 100% width of p, once added absolute absolute positioning, the element is immediately inline-block, the default width will be adapted to the inner width of the element, resulting in the width and height of the page collapse.
2. Due to the flexibility of absolute absolute positioning, for the normal layout of the page, sometimes for the sake of easy to cause absolute/relative/top/left/z-index abuse, which will cause later expansion and maintenance of trouble
(c): Position code example
1.relative relative positioning.
Object 2 moves in relation to its original position in the document flow and also occupies the document flow, and the yellow block below continues to be arranged in its original position, relative only the visual position has changed.
<style>body{color: #fff;}. aa{width:400px;margin:0 auto;border:2px solid #000; height:400px} #position1 {height:100px;background:green;} #position2 {height:100px;background:blue;position:relative;top:10px;left:50px;} #position3 {height:100px;background:yellow;color: #000}</style><body><p class= "AA" > <p ID = "Position1" > Object 1</p> <p id= "Position2" > Object 2</p> <p id= "Position3" > Object 3</p ></p></body>2.absolute Absolute Positioning
The object 1absolut property, relative to the parent p offset, is detached from the document flow, and the wide height collapses above the document flow.
<style>body{color: #fff;}. aa{width:400px;margin:0 auto;border:2px solid #000; height:400px;position:relative;} #position1 {height:100px;background:green;position:absolute;top:10px;left:50px;} #position2 {height:100px;background:blue;} #position3 {height:100px;background:yellow;color: #000}</style>Second, float float
(i) the definition of float
The Float property defines the element floating in the left/right direction. A floating element generates a block-level box, regardless of its own element.
Value of float: left/right/none
(ii) Float to achieve text wrapping
Elements with floating attributes can also make elements inline-block, with the inclusion of elements that allow the element to merge the advantages of block elements and inline elements. Elements with floating properties are arranged out of the standard flow, floating elements floating outside the standard flow on top of the normal block elements, but still occupy the text space of normal document flow, so that the subsequent text in addition to the floating elements of the space as a baseline, resulting in text wrapping effect.
<style>.a{width:200px;height:400px;margin:0 auto;border:1px solid #000;}. Pic{float:left;} p{font-size:16px;line-height:18px;font-family: "Microsoft Yahei"}</style>(iii) Float floating layout
The standard document flow is arranged from top to bottom.
P1 to the left float, it is obvious that the height collapses, p2 and P3 and P1 overlap.
(d) Why to clear floating and clear floating several methods
Because of the side effects caused by the floating element height collapse, the parent box cannot be stretched, the background cannot be displayed, and the margin and padding settings between the parent and child are not displayed correctly.
<style>.p1{width:400px;border:2px solid #000;}. P2{width:100px;height:100px;background:blue;float:left;}. P3{width:100px;height:100px;background:green;float:right;} </style>Method 1: Before the parent ends, add a sub-label <p style= "Clear:both;" ></p>
<p class= "P1" > <p class= "P2" >p2</p> <p class= "P3" >p3</p> <p style= " Clear:both; " ></p></p>Method 2: Add the overflow:hidden;zoom:1 to the parent CSS property, or overflow:auto;zoom:1;
Method 3: Use the Zoom+:after method in the parent, similar in principle to Clear:both, using CSS: After in the element with a CLEAR:BOTH element block
. Box1{zoom:1;}. Box1:after{display:block; content: ' Clear '; clear:both; line-height:0; visibility:hidden;}Method 4: Set the appropriate height for the parent to open directly
(v) Float and JavaScript
IE Browser:
Obj.style.styleFloat = "Left";Other browsers:
Obj.style.cssFloat = "Left";
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
