Home > Developer > JavaScript
Summary (1) position positioning of CSS and float floating, positionfloat
A series of blogs will be updated in the near future to consolidate and sort out the basic knowledge.
I. position positioning (I): attribute of position1. absolute: generates absolute positioning elements. Relative to the last level of positioning, it is not a static parent element;
2. relative: generates relative positioning elements and locates them relative to the normal Document Stream location;
3. static: the default value. The element is not located and appears in the normal document stream;
4. fixed: The old IE does not support it. It is consistent with absolute. It locates relative to the window. When a scroll bar appears, it does not scroll;
5. sticky: (CSS3) There is a compatibility problem. It is like the combination of relative and fixed. When the screen is in regular streaming layout, it is like fixed when the volume is moved out of the screen. This property shows the actual adsorption effect you see.
(2): Problems Arising from position usage1. suppose there is a div with a default width of 100%. Once absolute is absolutely positioned, the element is immediately inline-block, and the default width will adapt to the internal width of the element, which will cause the width and height of the page to collapse.
2. due to the flexibility of absolute positioning, absolute/relative/top/left/z-index can be abused for common page la s for convenience reasons, this will cause trouble for later extension and maintenance.
(3) position code example1. relative positioning of relative.
Object 2 moves relative to the original position of its own document stream and still occupies the document stream. The yellow blocks below continue to be arranged according to its original position. relative only changes the visual position.
<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> <div class = "aa"> <div id = "position1"> Object 1 </div> <div id = "position2"> object 2 </div> <div id = "position3"> Object 3 </div> </body>
2. absolute location of absolute
The object 1absolut is offset from the parent div, which is out of the Document Stream and collapsed in width and height.
<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> Ii. float floating (1) Definition of float
The float attribute defines that the elements float in the left/right direction. A floating element generates a block-level box, regardless of its own elements.
Float value: left/right/none
(2) float for text wrapping
Elements with floating attributes can also make the element inline-block, which is encapsulated, so that the elements merge the advantages of block elements and inline elements. Elements with floating attributes are arranged and arranged out of the standard stream. The floating elements after the standard stream are floating on the normal block element, but still occupy the text space of the normal document stream, the subsequent text is arranged based on spaces other than floating elements, forming the effect of text wrapping.
<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> (3) float floating Layout
Standard document streams are arranged from top to bottom.
After div1 is float to the left, it is obvious that the height of div2 overlaps with div3 and div1.
(4) how to clear float and floating
As a result of floating, the element height collapsed, resulting in side effects. The border of the parent-child box cannot be opened, the background cannot be displayed, and the margin and padding values of the parent-child boxes cannot be correctly displayed.
<style>.div1{width: 400px;border: 2px solid #000;}.div2{width: 100px;height: 100px;background: blue;float: left;}.div3{width: 100px;height: 100px;background: green;float: right;}</style>
Method 1: Before the parent level ends, add a sub-tag <div> <div class = "div1"> <div class = "div2"> div2 </div> <div class = "div3"> div3 </div> <div style = "clear: both; "> </div>
Method 2: Add overflow: hidden; zoom: 1; or overflow: auto; zoom: 1 to the parent css attribute;
Method 3: Use the zoom +: after method at the parent level. The principle is similar to clear: both. Add a clear: both element block to the element by using the CSS method: after.
.box1{zoom:1;}.box1:after{display:block; content:'clear'; clear:both; line-height:0; visibility:hidden;}
Method 4: set a proper height for the parent class to open it directly
(5) 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
