This article is for you to share the basic concept of CSS3 positioning and floating, and the use of methods, for your reference, the specific contents are as follows
First, positioning
1, CSS positioning:
Change the position of the element on the page
2, CSS positioning mechanism:
Normal Flow:
Floating:
Absolute layout:
3, CSS positioning properties:
Position put elements in a static, relative, absolute, or fixed position
Top/left/right/botom element up/left/right/bottom offset
Overflow setting elements overflow what's happening in their area
Clip Set element Display shape
Vertical-align sets the way the element is displayed
Z-index set the stacking order of elements/to set the stacking order of elements, the larger the higher the
Properties of the position
Static statically (default)
Relative relative layout (default)
Absolute absolute layout (not associated with other tags)
Fixed (does not move with the scrolling of the page)
Instance code:
<body> <p id= "Position1" ></p> <p id= "Position2" ></p> <script> For (Var i=0;i<100;i++) { document.write (i+ "<br/>") } </script> </body> #position1 { width:100px; height:100px; Background-color:blue; position:relative; left:20px; top:20px; /* To set the stacking order of the elements, the larger the higher the above */ z-index:2; } #position2 { width:100px; height:100px; background-color:red; position:relative; left:30px; top:10px; z-index:1; }Second, floating
Values available for the Float property:
Left/right/none/inherit: Left, right, non-floating, inherited from parent.
* Float
1. After floating, detach from normal flow and arrange in floating flow. Any element is displayed as a block element, and can be set to a wide height and the content to open up the width.
2. A lot of floating blocks together, they always find their nearest, floating direction of the same block to determine their position, if forced to line, then the height of the nearest element as the basis for a new row
Clear property: Remove floating attributes (including inherited)
The meaning is the same as above
need to clear the floating situation:
After the child label floats, the height of the parent tag cannot be open, so it needs to be clear and floating;
The newly added labels, which want to be unaffected by the previous floating elements, need to be clear and floating;
1.clear:both; height:0; Overflow:hidden;
2.overflow:hidden; Trigger layout is often used for clear inner float;
3.after Pseudo-object: set to current object
. aa:after {content: '. '}
. aa {Display:inline-block;}
. aa {Display:block;}
Think of ways to trigger IE6 layout rendering mechanism, by luck to solve a lot of bug,zoom:1 can trigger!!!
Inline-block internal block external line;
4. The parent tag floats together;
5.position:absolute; Clear Floating
Display
Display:block are displayed as block elements;
Display:none content disappears, does not occupy space;
Display:inline in line element display, can solve IE6 double bug;
Display:inline-block inner block, external line.
Visibility: None
Hidden, but still occupy space, affect the layout
The above is the whole content of this article, I hope that everyone's learning has helped, more relevant content please pay attention to topic.alibabacloud.com!
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
