Home > Developer > Web Develop
CSS positioning
Static: The element box is normally generated. Block-level elements generate a rectangular box that, as part of the document flow, creates one or more row boxes in the parent element of the inline element.
Relative positioning (relative): locates with the nearest element. Move relative to the original position
Note that when using relative positioning, the element still occupies the original space, regardless of whether it is moved or not. Therefore, moving an element causes it to overwrite other boxes.
Absolute positioning (absolute): an element box set to absolute positioning is completely removed from the document flow and is positioned relative to its containing block, which may be another element in the document or an initial containing block. The space that the element originally occupied in the normal document flow is closed as if the element had not existed. The element is positioned to generate a block-level box, regardless of what type of box it was generated in the normal flow. (is referenced by the border of HTML)
Note: Because absolutely positioned boxes are independent of the document flow, they can overwrite other elements on the page. You can control the stacking order of these boxes by setting the Z-index property.
In the following example, there is a cascade with the above element:
Set top:20px, which causes the gap to be insufficient, to overwrite.
123<style type="Text/css">4 H2.pos_abs5 {6 Position:absolute;7 left:100px;8 top:20px9 }Ten</style> One A -<body> -class="Pos_abs"> This is the title with absolute positioning the<p> with absolute positioning, elements can be placed anywhere on the page. The following caption is 100px from the left side of the page and 150px from the top of the page. </p> -</body> - -Fixed positioning: The position with fixed positioning does not change when the page scrolls. Fixed positioning is only used in certain situations and is not normally used.
Floating
Floating (float): A floating box can be moved left or right until its outer edge touches the bounding rectangle of the containing box or another floating box. There are (Left,right,none,inherit) four properties.
Floating is automatically detached from the document flow
Clear float:
After the use of floating, will cause some problems, floating content can not be well positioned, in the location due to out of the document flow, width and height will be affected, can not be set to ideal effect, so can sometimes be resolved by clearing floating.
Clear float can be used:
Two sub-objects inside an object are set to float, and the front float is cleared
Overflow:hidden, can clear float, also can, the element overflow part hides, also will use when writes the carousel.
Overflow:auto;
Clear:both (Left,right,none,inherit)
It also brings a number of extraneous elements.
Using pseudo after elements:
The method must be set height:0 in the pseudo-object that needs to clear the floating element, otherwise the element will be higher than the actual number of pixels;
The content property is required, but its value can be null, blue ideal when discussing this method, the value of the Content property is set to ".",
When writing html+css, I used to use the unordered list, and then use float to arrange the Li, there are a lot of problems, using floating to not achieve the desired positioning effect, while adjusting the screen size, positioning will also be affected, resulting in structural damage. (So to clear the float, or avoid using floating methods), use the Float property as little as possible.
Display:inline-block the object as an inline object, but the content of the object is presented as a block object. The inline object next to it will be presented in the same row. The floating out-of-document flow can be resolved, and the height and width can be defined.
You can solve the problem of floating when you are positioning.
CSS Positioning and floating
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
