Home > Developer > Web Develop
There are 3 ways to position CSS elements: normal flow, relative position, absolute position. Implemented by setting the Position property.
| Inherit | Inherits the value of the parent element position property. |
Static |
The default value . No positioning, elements appear in the normal stream (ignoring top, bottom, left, right, or z-index declarations). |
Relative |
Generates relatively positioned elements that are positioned relative to the normal position of the element itself . Therefore, "left:20" adds 20 pixels to the left position of the element. |
Absolute |
Generates an absolutely positioned element to locate the first non-static ancestor element . The position of the element is defined by the "left", "Top", "right" and "bottom" attributes. |
Fixed |
Generates an absolutely positioned element that is positioned relative to the browser window . The position of the element is defined by the "left", "Top", "right" and "bottom" attributes. |
Normal flow positioning is: Static, the default positioning relative position is: relative relative to the element itself as a normal flow position, occupy the original position of the document flow
There are 2 absolute position positions: absolute and fixed, one relative to its first non-static ancestor element, and one relative to the browser window, which does not occupy the original document flow position.
example 1:static Normal stream positioning, the top property of the red Div fails
<Body> <Divstyle= "Border:solid 1px #0e0; width:200px;"> <Divstyle= "height:100px; width:100px; background-color:red; top:20px;"></Div> <Divstyle= "height:100px; width:100px; background-color:green; "></Div> <Divstyle= "height:100px; width:100px; background-color:blue;"></Div> </Div></Body>
example 2:relative relative position, Green div relative static position moved to right and down 20px, Green Div Original document location is still there.
<Body> <Divstyle= "Border:solid 1px #0e0; width:200px;"> <Divstyle= "height:100px; width:100px; background-color:red; top:20px;"></Div> <Divstyle= "height:100px; width:100px; background-color:green; position:relative; top:20px; left:20px;"></Div> <Divstyle= "height:100px; width:100px; background-color:blue;"></Div> </Div></Body>
Example 3.1:absolute absolute position (does not occupy the original document flow position), does not specify the parent element div's position attribute, then the Green Div's parent div is the static positioning, so do not choose this div to do the reference, select window as the reference
<Body> <Divstyle= "Border:solid 1px #0e0; width:200px;"> <Divstyle= "height:100px; width:100px; background-color:red; top:20px;"></Div> <Divstyle= "height:100px; width:100px; background-color:green; position:absolute; top:20px; left:20px; "></Div> <Divstyle= "height:100px; width:100px; background-color:blue;"></Div> </Div></Body>
example 3.2:absolute absolute position, the parent div position is relative, is no longer static, so select the parent div for reference.
<Body> <Divstyle= "Border:solid 1px #0e0; width:200px; position:relative;"> <Divstyle= "height:100px; width:100px; background-color:red; top:20px;"></Div> <Divstyle= "height:100px; width:100px; background-color:green; position:absolute; top:20px; left:20px; "></Div> <Divstyle= "height:100px; width:100px; background-color:blue;"></Div> </Div></Body>
Example 4:fixed absolute position, which does not occupy the position of the document flow relative to window windows.
<Body> <Divstyle= "Border:solid 1px #0e0; width:200px; position:relative;"> <Divstyle= "height:100px; width:100px; background-color:red; top:20px;"></Div> <Divstyle= "height:100px; width:100px; background-color:green; position:fixed; bottom:20px; left:20px; "></Div> <Divstyle= "height:100px; width:100px; background-color:blue;"></Div> </Div></Body>
CSS Positioning Properties Position
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
